javascript - D3 交错动画

Question

我正在尝试为我正在制作的 d3 作品错开输入(和过渡，但从输入开始)动画。诚然，我对这个 D3 没有很好的掌握，因为我才刚刚开始使用它，但这就是我正在尝试的 -

nodeEnter.append("text")
  .transition()
  .delay(100)
   .each("start", function() { 
      d3.select(this)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });
  });

因此，预期的效果是每次进入转换都比前一个延迟 60 毫秒。有点像如果我要循环并执行类似delay = i*60 的操作。我将不胜感激任何指导。谢谢!

Answer 1

d3 的 delay() 接受像其他方法一样的函数:

nodeEnter.append("text")
  .attr("dy", "0em")// <-- May or may not be needed
  .transition()
  .delay(function(d, i) { return i*60; })// <-- delay as a function of i
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });