Question

我希望两个点以不同的速度围绕两个更大的圆圈移动。它基于Mike Bostock的“Point-Anlong-Path Interpolation”。通过使用transition调用.attrTween来实现。重复是通过循环转换函数

完成的

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

我能够自己解决这个问题。我更新了我的小提琴：

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);
})

d3.js独立重复过渡

1 个答案: