遞歸d3動畫問題

我想通過鏈接動畫和遞歸一起使用d3來運行動畫。我有一個功能動畫調用自身下去，直到所有的動畫鏈接在一起遞歸d3動畫問題

(function animate(transition) { 
    // code here 

    animate(transition.transition()) 
})(selection.transition());

工作本身的可視化，但我試圖跟蹤多少次的函數被調用，所以我可以顯示它在屏幕上與動畫同步。然而，遞歸在第一次完成之前將轉換鏈接在一起，所以我的計數器總是隻是最後一次轉換的編號。

這裏的a jsfiddle顯示了我想要做的事情。奇怪的是，圓的半徑設置正確，即設置屬性時，它會得到正確的計數，而在同一個動畫中調用它是不正確的。我查看了舊的堆棧溢出問題，並且我查看了d3文檔，並且我無法找到在整個遞歸過程中跟蹤計數的好方法。有沒有人知道這樣的方式？

來源

2013-07-17 user2592854

您的遞歸函數立即運行 - 用console.log(count++);替換count++; - 您將看到控制檯將立即被1,2,3，...，59填充。過渡不斷慢慢打，因爲自動D3 chains transitions，所以：

svg.selectAll('circle') 
    .transition().style("fill","pink") 
    .transition().duration(10000).style("fill", "green") 
    .transition().duration(400).style("fill", "red")

將會把所有的圈子裏svg粉紅色，然後綠色緩慢，然後迅速紅了。你基本上將遞歸函數鏈接在一起，並列出一大串60個過渡，而d3慢慢地展現出來。

我不確定你的代碼中保持計數與動畫同步的最佳位置 - 也許別人可以插入？我可能會使用d3.timer而不是一個不可靠的遞歸函數。

來源

2013-07-17 21:34:14

沒錯。它將它們鏈接在一起，然後慢慢播放它們，如果我有一些方法可以將count變量保存到每個轉換中，這就是我想要的。我想出了一種哈克式的方式來做到這一點，即將鏈接轉換到並行計數器，如下所示：（函數動畫（circle_trans，counter_trans）{ // ... counter_trans.call功能（）{ counter_trans .__ data__ =計數; }）; // ... 動畫（circle_trans.transition（），counter_trans.transition（））; }）（）;' 但我覺得應該有一個更簡單的方法 – user2592854

遞歸d3動畫問題

回答

相關問題