链接动画/转场在每个图形节点上

Chained animations/transitions over each graph node - D3.js

本文关键字：图形 节点 动画 链接      更新时间：2023-09-26

我希望能够改变我使用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. 各node与
    2. 过渡之间的delay
  2. 为nodes发生转变的顺序。

任何指针，教程，甚至其他stackoverflow答案将是伟大的。理想情况下，我想要一些代码示例。

我在网上找到的最接近的参考资料是d3.js过渡教程的这一部分:http://bost.ocks.org/mike/transition/#per-element。然而，它缺少一个具体的代码示例。我是d3.js和javascript的新手，如果没有具体的代码示例，我无法接受它。

通过基于每个节点的索引计算延迟可以很容易地做到这一点。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数组的文档。

相关文章：