每个图形节点上的链接动画/转换 - 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部分。