在d3js中选择多个路径

Question

我已经从Mike Bostocks arc tween更改了此代码，以使其成为多个补间。我想选择每个弧并使用唯一值单独设置它们。我现在所做的是this

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

我感到困惑的地方在于选择部分。'foregrounds'选择由3个弧组成，当我转换时，所有的弧都会转换，但动画非常微不足道。而且我还想单独为这些弧设置动画具有独特的价值。我该怎么办？为每个路径使用id并使用循环转换它们或者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。