交错？锁链？由一系列不同的delay()和duration()的d3转换寻址的单个DOM元素

正如所解释的here http://bost.ocks.org/mike/transition/#per-element，您可以安排连续的转换驱动的属性值更改singleelement [..]“使用transition.transition，它创建一个新的过渡，其延迟立即跟随现有的过渡”（该声明似乎暗示交错过渡不适用于单个元素）。

正如中所解释的this https://groups.google.com/forum/#!topic/d3-js/I5FtBPBDhag然而，帖子“链式转换（transition.transition）是由继承延迟基于前一个转换的延迟 + 持续时间，因此，如果您随后通过自己设置来覆盖延迟，您仍然设置相对于当前时间的延迟，而不是前一个转换的结束时间”。

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

总而言之，据我所知，我既不能蹒跚nor链接转换：在这两种情况下，每个转换的延迟和持续时间将被后继的延迟和持续时间覆盖。

至于例子，我发现的最接近的是this https://stackoverflow.com/questions/17086415/d3-how-to-properly-chain-transitions-on-different-selections，尽管它本身很有用，但并不足以涵盖我的特殊情况。我不知道如何继续。有什么建议么？

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

 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() https://github.com/mbostock/d3/wiki/Transitions#each为“结束”事件附加一个处理程序并使用它来设置第二个转换：

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 http://jsfiddle.net/zjuzgfgu/1/.