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; });

D3 交错动画

D3 stagger animations

javascript

d3.js