链式动画/在每个图形节点的过渡 - D3.js(Chained animations/transi

我希望能够改变每个节点的半径在我的图表，我正在创建使用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在我的图形化同时，即大小（半径）同时增长。 但我希望他们能转换IE的大小（半径）长，一次一个。 我再说一遍，我希望能够控制：

1. 该delay的每个的转变之间node和
2. 顺序nodes经历的转变。

任何指针，教程，甚至是其他计算器答案将是巨大的。 我想最好要一些代码示例。

我在网上引用的条款来最接近的是本款上d3.js转变的教程： http://bost.ocks.org/mike/transition/#per-element 。 但是，它缺乏一个具体的代码示例。 我，作为新d3.js和JavaScript在一般情况下，我不能够把它捡起来如果没有具体的代码示例。

Answer 1:

您可以通过计算基于每个节点的指数延迟做到这一点很容易。 迈克·博斯托克有这样一个实现的例子在这里 。 这是相关的代码：

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参考的部分。

文章来源: Chained animations/transitions over each graph node - D3.js