D3.js 交错的？锁链？单个DOM元素由一系列不同延迟（）和持续时间（）的d3转换寻址

如前所述，您可以使用transition.transition“在单个元素[…]上安排连续的转换驱动属性值更改，这将创建一个新的转换，其延迟紧跟在现有转换之后”（该语句似乎暗示交错转换在单个元素上不起作用）

然而，正如在文章中所解释的，“链式转换（transition.transition）通过继承基于上一个转换的延迟+持续时间的延迟来实现，因此，如果您随后通过自己设置延迟来覆盖延迟，则您仍然设置相对于当前时间的延迟，而不是上一个转换的结束”

像往常一样，我似乎有一个特殊的情况：一个单一的元素（为了争论的缘故，一个要改变颜色的圆圈）通过一系列的变化的延迟和持续时间的转换来处理。这意味着我别无选择，只能自己设置延迟和持续时间

总之，就我所见，我既不能错开过渡，也不能连锁过渡：在这两种情况下，每个过渡的延迟和持续时间都将被继任者的延迟和持续时间所覆盖

---

至于例子，我发现的最接近的例子是，虽然它本身很有用，但它还不能涵盖我的具体情况。我不知道如何进行。有什么建议吗？

这里基本上有两种选择。首先，您可以使用普通链式转换模式，根据先前转换的持续时间计算后续转换的延迟：

 d3.select("svg").append("circle")
   .attr("transform", "translate(20,20)")
   .attr("r", 20)
   .attr("fill", "black")
   .transition().duration(1000)
   .attr("fill", "orange")
   .transition().delay(1500).duration(500)
   .attr("fill", "blue");

第二次转换的延迟1500是第一次转换的持续时间1000，加上第二次转换开始之前的延迟500。如果您可以访问这些数字（例如，从绑定到元素的数据），那么您应该能够非常轻松地计算后续转换的延迟

另一种方法是使用附加“end”事件的处理程序，并使用该处理程序设置第二个转换：

d3.select("svg").append("circle")
  .attr("transform", "translate(100,20)")
  .attr("r", 20)
  .attr("fill", "black")
  .transition().duration(1000)
  .attr("fill", "orange")
  .each("end", function() {
    d3.select(this)
    .transition().delay(500).duration(500)
    .attr("fill", "blue");
  });

这里，第二次转换的延迟与第一次转换相关，即仅在第一次转换完成时开始。然而，这种方法确实要求您拥有这些嵌套调用，这可能可行，也可能不可行，这取决于您所寻找的内容

如果可以毫不延迟地启动转换，则所有操作都将按预期进行：

d3.select("svg").append("circle")
  .attr("transform", "translate(180,20)")
  .attr("r", 20)
  .attr("fill", "black")
  .transition().duration(1000)
  .attr("fill", "orange")
  .transition().duration(1000)
  .attr("fill", "blue");

在这里，当第一个转换完成时，第二个转换开始

完成演示