iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
1
AI & Data

D3.js資料視覺化的浪漫突進系列 第 27

Day27 D3js 動畫事件小技巧

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


上一篇
Day26 D3js 浪漫復刻ExpertOption的養眼圖表
下一篇
Day28 D3js Diagram常見的兩點浪漫路徑
系列文
D3.js資料視覺化的浪漫突進30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言