Question

正如here所述，您可以使用transition.transition在单个元素[...]＆＃34;上安排连续的转换驱动属性值更改，从而创建新的转换其延迟紧跟现有的过渡后＃34; （这似乎暗示交错过渡不会对单个元素起作用）。

正如this帖子中所解释的那样，＆＃34;链接转换（transition.transition）是通过继承基于前一个转换的延迟+持续时间来实现的，因此，如果您随后通过自己设置延迟来覆盖延迟，那么您仍然相对于当前时间设置延迟，而不是上一次转换的结束＆＃34;。

像往常一样，我似乎有一个特殊情况：一个元素（为了论证的缘故，一个颜色要改变的圆圈）通过一系列变化延迟的过渡来解决和持续时间。这意味着我无法选择但来自行设置延迟和持续时间。

总之，据我所知，我既不能错开也不能链接转换：在这两种情况下，每个转换的延迟和持续时间都将被后继者的覆盖所覆盖。

至于例子，我发现的最接近的是this，虽然它本身很有用，但并不能覆盖我的特定情况。我不知道如何继续。有什么建议吗？

Answer 1

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

 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。如果您可以访问这些数字（例如，从绑定到元素的数据），你应该能够很容易地计算后续转换的延迟。

另一种方法是使用transition.each()附加“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");

这里第二次转换从第一次转换开始。

完整演示here。

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

1 个答案: