Выбор нескольких путей в d3js

Question

Я изменил этот код от Майка Бостокса arc tween, чтобы сделать его несколькими дугами tween.I хочу выбрать каждую дугу и анимировать их индивидуально с уникальным значением. То, что я сделал сейчас this

setInterval(function() { 
    foregrounds.transition() 
     .duration(750) 
     .call(arcTween, degToRad(getRandomRange(-150,150)));     
}, 1500); 

, где я имею путаницу в части выбора. 'foregrounds' выбор состоит из 3 дуг, и когда я перехожу, все дуги переходят, но анимация очень незначительна. А также я хочу анимировать эту дугу индивидуально с уникальным значением. Что мне здесь делать? используя идентификаторы для каждого пути и переходу их с помощью цикла или должен быть какой-то метод в d3js?

Answer 1

В этом случае вам не нужно degToRad - генератор дуги делает это преобразование для вас. Если вы удалите его, вы увидите большие изменения. Для того, чтобы иметь отдельные изменения для каждой дуги, просто вычислить угол внутри arcTween, а не на самом высоком уровне:

function arcTween(transition) { 
    transition.attrTween("d", function(d) { 
    var interpolate = d3.interpolate(d.endAngle, getRandomRange(-150,150)); 
    return function(t) { 
     d.endAngle = interpolate(t); 
     return arc(d); 
    }; 
    }); 
} 

Полный пример here.