每个图节点上的链接动画/过渡 - D3.js(Chained animations/transitions over each graph node - D3.js)

 我希望能够使用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同时转换，即同时增大尺寸（半径）。 然而，我希望它们转换，即一次一个地增大尺寸（半径）。 我再说一遍，我希望能够控制： 
 
 
 
 每个node的转换和之间的delay 
 
 
 经历转换的nodes的顺序。 
 
 
 任何指针，教程，甚至其他stackoverflow答案都会很棒。 我理想地想要一些代码示例。 
 
 我在网上引用方面最接近的是关于d3.js过渡的教程的这一小节： http ：//bost.ocks.org/mike/transition/#per-element。 但是，它缺少具体的代码示例。 我是d3.js和javascript的新手，如果没有具体的代码示例，我就无法接受它。 

I want to be able to change the radius of each node in my graph that i am creating using d3.js. However, i want to change the radius of each node, one at a time, and i want to able to control the delay between each change along with the sequence of the nodes. 
 
For now this is what i have in terms of code:
 
var nodes = svg.selectAll(".node");
nodes.each(function() { 
  d3.select(this).
  transition().
  delay(100).
  attr("r", "5") 
});
 
You can replicate this simply by using the code at this link: http://bl.ocks.org/mbostock/4062045. The code that i have pasted above is simply an addition to the code at the aforementioned link.
 
When i run this, all the nodes in my graph transition simultaneously, i.e. grow in size (radius) simultaneously. I however want them to transition i.e. grow in size (radius), one at a time. I repeat that i want to be able to control: 
 
 
 
the delay between the transition of each node and 
 
 
the order of nodes that undergo the transitions. 
 
 
Any pointers, tutorials, or even other stackoverflow answers would be great. I would ideally want some code examples.
 
The closest i have come to in terms of online references is this subsection of a tutorial on d3.js transitions: http://bost.ocks.org/mike/transition/#per-element. However, it lacks a concrete code example. I, being new to d3.js and javascript in general, am not able to pick it up without concrete code examples.

原文：https://stackoverflow.com/questions/15319501