每個圖節點上的鏈接動畫/過渡 - D3.js

Question

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

現在這就是我的代碼：

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

您只需使用此鏈接中的代碼即可復制此內容： http ： //bl.ocks.org/mbostock/4062045 。 我上面粘貼的代碼只是上述鏈接中代碼的補充。

當我運行它時，我的圖形中的所有nodes同時轉換，即同時增大尺寸（半徑）。 然而，我希望它們轉換，即一次一個地增大尺寸（半徑）。 我再說一遍，我希望能夠控制：

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

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

我在網上引用方面最接近的是關於d3.js過渡的教程的這一小節： http ：//bost.ocks.org/mike/transition/#per-element。 但是，它缺少具體的代碼示例。 我是d3.js和javascript的新手，如果沒有具體的代碼示例，我就無法接受它。

Answer 1

您可以通過根據每個節點的索引計算延遲來輕松完成此操作。 Mike Bostock 在這里有一個這樣的實現的例子。 這是相關代碼：

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部分。