每個圖形節點上的鏈接動畫/轉換 - D3.js

Question

我希望能夠使用d3.js更改我創建的圖形中每個節點的半徑。但是，我想每次更改一個節點的半徑，並且希望能夠控制每次更改之間的延遲以及節點的順序。

現在這是我在代碼方面：http://bl.ocks.org/mbostock/4062045：

var nodes = svg.selectAll(".node"); 
nodes.each(function() { 
    d3.select(this). 
    transition(). 
    delay(100). 
    attr("r", "5") 
}); 

你可以簡單地通過使用代碼在此鏈接複製此。我上面粘貼的代碼僅僅是上述鏈接的代碼的補充。

當我運行這個時，我的圖形過渡中的所有nodes同時，即同時增長大小（半徑）。然而，我希望他們能夠逐漸過渡，即逐漸增大（半徑）。我再說一遍，我希望能夠控制：

1. 每個node和
2. 的nodes經歷轉變的順序的轉變之間的delay。

任何指針，教程，甚至其他stackoverflow答案會很好。我會理想地想要一些代碼示例。

我在網上參考文獻中最接近的是d3.js轉換教程的這一小節：http://bost.ocks.org/mike/transition/#per-element。但是，它沒有具體的代碼示例。我是一般的d3.js和javascript的新手，如果沒有具體的代碼示例，我無法挑選它。

Answer 1

通過計算基於每個節點索引的延遲，您可以非常輕鬆地完成此操作。 Mike Bostock有這樣一個實現的例子here。這是相關代碼：

var transition = svg.transition().duration(750), 
    delay = function(d, i) { return i * 50; }; 

transition.selectAll(".bar") 
    .delay(delay) 
    .attr("x", function(d) { return x0(d.letter); }); // this would be .attr('r', ...) in your case 

要控制轉變的順序，那麼所有你必須做的是排序數組，這樣的元素的指數反映了動畫流你想要的。要了解如何對數組進行排序，請參閱JavaScript的array.sort方法的文檔，並參閱D3 API參考的Arrays > Ordering部分。