javascript - d3.js 独立重复转换

Question

我希望两个点以不同的速度围绕两个更大的圆移动。它基于 Mike Bostock 的“点长路径插值”。它是通过使用 .attrTween 调用 transition 来实现的。重复是通过循环转换函数来完成的

function circleTransition() {
  circleMove.transition()
    .duration(function(d) {
      return d.rotSpeed * 1000;
    })
    .ease(d3.easeLinear)
    .attrTween("transform", translateAlong(circlePath.node()))
    .on("end", circleTransition);
}

在较快的点完成本轮比赛后，较慢的点跳回起点，显然，本轮比赛再次开始。我怎样才能防止这种情况并使每个点持续留在其轨道上？

我准备了一个JSFiddle:https://jsfiddle.net/FFoDWindow/hbdw525w/5/ 。谢谢。

Answer 1

我自己已经弄清楚了。我更新了我的 fiddle :

https://jsfiddle.net/FFoDWindow/hbdw525w/9/

我必须遍历所有圆圈并为每个 circleMove 对象运行此函数。这是代码中有趣的部分:

circleMove.each(function transition(d){
    d3.select(this).transition()
    .duration(function(d) {
      return d.rotSpeed * 1000;
    })
    .ease(d3.easeLinear)
    .attrTween("transform", translateAlong(circlePath.node()))
    .on("end", transition);
})