我发现这个问题和答案对于如何让一条线以不同的速度动画很有帮助。
它指向了这个区块: http://bl.ocks.org/explunit/6082362
我一直在跟进这个,想要添加一个沿着线开始移动的圆圈。 我已经添加了一个标记。
var marker = g.append("circle")
.attr("r", 7)
.attr("id", "marker")
但是,就算我想了半天,也不能使它按照同样的速度沿着线移动。
我在该代码块末尾添加了这一部分。
var p = path.node().getPointAtLength(lengthAt[i-1] );
markerTransition = markerTransition.transition()
.duration(lineData[i].speed)
.ease('linear')
.attr("transform", "translate(" + p.x + "," + p.y + ")");
现在我有一个移动的圆,但它与线条不同步,并且由于某种原因位于不同的坐标上。如何使我的圆正确地沿着线移动(以不同的速度)?更新:快成功了!我添加了一个jsfiddle: http://jsfiddle.net/mbrownshoes/k86fbade/6/ 圆以正确的速度移动到第一个点,现在我需要圆从上一个点开始每次过渡,而不是从开始处。