如何在d3.js的路徑上動畫多個圈子？

我試圖把這作爲參考https://bl.ocks.org/mbostock/1705868。如何在d3.js的路徑上動畫多個圈子？

我想旋轉多個圓點而不是無限旋轉的單個圓。

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

我最初繪製路徑所需的所有點作爲https://jsfiddle.net/tzbd9r1f/2/

林這裏面臨兩個問題：

1：當我嘗試動畫所有我看到的圈只有一個圈子動畫，而不是這裏有5個圓圈https://jsfiddle.net/tzbd9r1f/1/。

2：如果我嘗試調用所有5圈結束的過渡，我得到的最大堆棧錯誤的情況下，使這個作爲無限旋轉這裏https://jsfiddle.net/tzbd9r1f/3/

請指導。

來源

2016-09-03 Vinod Louis

您代碼中的基本問題是您同時對所有點應用相同的翻譯。實際上，你們所有的圈子都在沿着這條道路前進，但它們互相覆蓋 - 所以你們已經完成了大部分任務。但是，如果您希望不同的圈子處於不同的座標位置，則必須爲它們應用不同的補間。也就是說，即使您計算出每個圈子的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改變transitionAll函數的調用在forEach -loop。

來源

2016-09-04 10:31:43 elias

感謝Lot @elias部分功能來拯救我完成它作爲https://jsfiddle.net/tzbd9r1f/4/ –

如何在d3.js的路徑上動畫多個圈子？

回答

相關問題