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