d3.jsリピートトランジションを個別に

Question

2つの大きな円の周りを2つの不等なスピードで移動したい。これはMike Bostockの "Point-Anlong-Path Interpolation"に基づいています。これは.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

私は自分でそれを理解することができました。私はバイオリンを更新：

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