javascript - 每个图形节点上的链接动画/转换 - 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 .我上面粘贴的代码只是对上述链接中代码的补充。

当我运行它时，我图形中的所有节点同时转变，即尺寸(半径)同时增长。然而，我希望它们过渡，即一次一个地增加尺寸(半径)。我再说一遍，我希望能够控制:

1. 每个节点和
的转换之间的延迟
2. 经历转换的节点的顺序。

任何指针、教程，甚至其他 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

要控制过渡的顺序，您接下来要做的就是对数组进行排序，以便元素的索引反射(reflect)您想要的动画流。要查看如何对数组进行排序，请参阅有关 JavaScript 的文档 array.sort方法，另见 Arrays > Ordering D3 API 引用部分。