在d3js中選擇多個路徑

Question

我已將此代碼從Mike Bostocks arc tween更改爲使多個圓弧補間。我要選擇每個圓弧並使用唯一值單獨爲其設置動畫。我現在所做的是this

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

我在這裏混淆是在選擇部分。 'foregrounds'選擇由3個弧組成，當我轉換時，所有的弧都被轉換，但動畫非常微不足道。而且我想用獨特的值分別對這些弧進行動畫處理。我必須在這裏做什麼？爲每個路徑使用ids，並使用循環轉換它們，或者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。