1

我希望能够更改我使用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. 每个和 delay之间的过渡node
  2. 它的顺序nodes经历了转变。

任何指针、教程，甚至其他 stackoverflow 答案都会很棒。理想情况下，我想要一些代码示例。

就在线参考而言，我最接近的是关于 d3.js 转换的教程的这个小节：http: //bost.ocks.org/mike/transition/#per-element。但是，它缺少具体的代码示例。我一般是 d3.js 和 javascript 的新手，如果没有具体的代码示例，我无法掌握它。

4

1 回答 1

4

您可以通过根据每个节点的索引计算延迟来很容易地做到这一点。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 参考的数组 > 排序部分。

于 2013-03-10T08:27:36.137 回答