d3.jsのパス上に複数の円をアニメーション表示する方法は？

Question

Imを参照の形で受けようとしていますhttps://bl.ocks.org/mbostock/1705868。

無限に回転する単円の代わりに、複数の円を点として回転させたいとします。

1：私は唯一の1円はアニメーションではなく参照のすべての円をアニメーション化しようとすると、私が最初にここに二つの問題に直面してhttps://jsfiddle.net/tzbd9r1f/2/

イムように、パス上のすべての必要なポイントをプロット

  function translateAlong(path) { 
      var l = path.getTotalLength(); 
      return function(i) { 
       return function(t) { 
       var p = path.getPointAtLength(t * l); 
       return "translate(" + p.x + "," + p.y + ")";//Move marker 
       } 
      } 
      } 

ここ5円はhttps://jsfiddle.net/tzbd9r1f/1/です。

2：私は、すべての5円の終了移行を呼び出そうとした場合、私はガイドしてください、これはのように無限のように、ここでhttps://jsfiddle.net/tzbd9r1f/3/

を回転作る場合の最大スタックエラーが発生します。

Answer 1

コードの基本的な問題は、すべてのポイントに対して同じ翻訳を同時に適用することです。実際にあなたのすべてのサークルはパスに沿って移動していますが、お互いをカバーしています。つまり、あなたはすでにタスクの大部分を行っています。ただし、異なるサークルの座標が異なるようにするには、異なるトゥイーンを適用する必要があります。つまり、円ごとに異なるstartPointsを計算したとしても、後でアニメーションでそれを使用しないので、すべての円が一緒に動いています。

は私が translateAlong関数に新しいパラメータとしてポイントのインデックスを追加し、いくつかの基本的な数学の円の位置を計算することでこれを解決し、それは次のようになります。このことも当然

function translateAlong(path,ind) { 
    var l = path.getTotalLength(); 
    return function(i) { 
    return function(t) { 
     var p = path.getPointAtLength(((t+ind/5)%1)* l); 
     return "translate(" + p.x + "," + p.y + ")";//Move marker 
    } 
    } 
} 

関数呼び出しを変更する必要があります。また、無限に経路をたどるには、ここで小さな問題があります。関数をパラメータとして渡すと、partial function applicationが必要です。

すべてのすべてで、次のようにtransitionAll変化（円のためのより多くの定期的な移動速度を持つように緩和私も追加リニア）：

function transitionAll(marker,ind){ 
    console.log(marker); 
    marker.transition() 
    .duration(7500).ease("linear") 
    .attrTween("transform", translateAlong(path.node(),ind)) 
    .each("end", partial(transitionAll,marker,ind));// infinite loop*/ 

そして新しい部分関数がポストからコピーされ、私はリンクされています：

function partial(func /*, 0..n args */) { 
    var args = Array.prototype.slice.call(arguments, 1); 
    return function() { 
    var allArguments = args.concat(Array.prototype.slice.call(arguments)); 
    return func.apply(this, allArguments); 
    }; 
}    

はまたstartPointsの上にforEach -loopにtransitionAll関数の呼び出しを変更することを忘れないでください。