D3速度問題與有向圖中的鏈接動畫

我想使用下面的代碼在力佈局有向圖上對鏈接進行動畫處理。鏈接是簡單的線條而不是路徑。我按下按鈕啓動動畫。風格變化（在onTick中）立即發生，但問題在於動畫本身需要大約10秒才能啓動。難道我做錯了什麼？我可以加速動畫的開始嗎？我不得不說，一旦動畫開始，動畫運行得很好。D3速度問題與有向圖中的鏈接動畫

function animLink(d) 
{ 
    this.transition() 
     .delay(0) 
     .duration(10000) 
     .ease("linear") 
     .attrTween("stroke-dashoffset", function() { 
      var i = d3.interpolateString("1000", "0"); 
      return function(t) { return i(t); }; 
     }) 
    .each("end", function() { d3.select(this).call(animLink); }); 
} 

onTick = function(e) 
{ 
    if (buttonPressed) 
     link 
      .style("stroke-dasharray", "10,10") 
      .call(animLink); 
}

你可以在這裏看到一個jsfiddle。在開始時，即使我指定.delay（0），也會有5秒的延遲。

與我在我的2000個節點相比，小提琴中的圖非常小。

來源

2014-11-05 gaitat

我認爲你需要'.each（animLink）'而不是'.call（animLink）'。 – 2014-11-05 17:45:49

實際上是最糟糕的。所有節點都以（0,0）結束，並且動畫根本沒有啓動。 – gaitat 2014-11-05 18:30:57

好的，你能提供一個完整的例子嗎？ 'link'和'onTick'叫什麼名字？ – 2014-11-05 18:35:00

問題是，您要調用強制佈局的每次迭代（即tick事件）開始動畫的代碼。也就是說，你一遍又一遍地設置它，以便它實際上沒有機會運行，因爲新的轉換取消了舊轉換。

當它實際運行時，這是因爲部隊佈局已經穩定下來，並且沒有更多tick事件。解決方案：在tick事件處理程序外調用代碼。演示here。

來源

2014-11-06 09:24:24

D3速度問題與有向圖中的鏈接動畫

回答

相關問題