d3.js獨立重複轉換

Question

我希望兩個點以不等速度繞兩個大圓移動。它基於Mike Bostock的「Point-Anlong-Path Interpolation」。通過撥打與.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 -object。這裏是代碼的有趣部分：

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