D3js 动画事件小技巧

用途

在d3世界中，如果想使用起来不是透过事件驱动或是外部驱动，而是想要产生一连串有顺序的动画，就可以派得上用场。

d3.duration

透过间隔时间，可以让动画有一定的时间区间，设定动画整体完成时间。

范例

rootLayer
  .append('circle')
  .transition()
  .duration(2000)
  .attr('cx', 150)
  .attr('cy', yScale(0))
  .attr('r', 10)

从产生圆形到圆形放置指定位置，会经历两秒。

变化事件

transition.on(事件, callback)动画会产生四种事件。

• start - 动画开始时
• end - 动画结束时
• interrupt - 动画被中断
• cancel - 动画被取消

我们可以针对start, end做事件开始以及结束的监听，像昨天的图表位移就是利用end来达到每次结束反覆执行。

回圈动画

如果要产生无限回圈的动画，就可以透过start, end事件达到。

rootLayer
  .append('circle')
  .attr('cx', 150)
  .attr('cy', yScale(0))
  .attr('r', 10)
  .transition()
  .duration(2000)
  .on('start', tickDown)
  // 如果渐变开始，就呼叫tick Down

function tickDown() {
 // 延续`this`的渐变事件，并且目标设定`cy`。
 // 等待渐变完成之後，再次渐变开始并仍有`duration(2000)`属性。
 // 开始新的渐变时，又会呼叫`tickUp`，并互相执行，就开始回圈了！
  d3.active(this)
    .attr('cy', yScale(1))
    .transition()
    .on("start", tickUp);
}
  
function tickUp() {
  d3.active(this)
    .attr('cy', yScale(0))
    .transition()
    .on("start", tickDown);
}
 

d3.active会选取该Target(this)上有的渐变事件，并且延续使用。

transition有特点就是如果有duration一定要等到执行完成，才会继续执行下一次transition。

结论

这也不是甚麽很厉害的方法，但我觉得透过这种方式，可以清楚的掌握动画各个状态，虽然很容易写出一大包有顺序关系的callback，但d3目前写下来，就是会发生类似jQuery的问题，不过还是值得研究。

Codepen范例

参考

d3-transition