d3.js 動態圖表

d3js v5.9.2
使用d3創建動態圖表主要使用到了d3.trasition部分的API，通過他們可以完成動畫
我的學習記錄是通過一個例子瞭解這些API

會動的柱狀圖

還是拿之前的例子，代碼在此：完整的柱圖

修改的代碼部分在於創建rect處：

//原來的代碼
barContainer.append('rect')
    .attr('height', d => barScale(d))
    .attr('width', barWidth - 1);

加上動畫效果後代碼如下

barContainer.append('rect')
    .attr('height', 0) //動畫開始前狀態
    .attr('width', barWidth - 1)
    .transition() //selection.transition() 返回transition
    .duration(1000)//持續時間
    .ease(d3.easeBackInOut)//transition.ease(easing function)，easing function是d3的動畫函數，還有很多其他api
    .attr('height', d => barScale(d));//transition.attr()

？？是從上向下繪製的
這裏我們可以用rect的y屬性控制動畫，y表示矩形左上角端點的縱座標

barContainer.append('rect')
    .attr('height', 0)
    .attr('width', barWidth - 1)
    .attr('y', d => barScale(d)) //y是相對rect父級的g容器的，頂端從底部開始，故值設爲矩形的高
    .transition()
    .duration(2000)
    .ease(d3.easeBackInOut)
    .attr('height', d => barScale(d))
    .attr('y', 0);//到g容器頂部

所以過程就是矩形長度向下拉伸，同時位置上移

這樣子就完成了動畫

更簡潔的寫法

上面的寫法是最簡單的寫法，但是代碼太長或者同一個動畫效果多次使用就會很冗雜，我們可通過d3.transition()獲得自定義的transition
使用也很簡單

//定義transition
let t = d3.transition()
    .duration(2000)
    .ease(d3.easeBackInOut);
barContainer.append('rect')
    .attr('height', 0)
    .attr('width', barWidth - 1)
    .attr('y', d => barScale(d))
    .transition(t) //使用新定義的transition
    .ease(d3.easeBackInOut)
    .attr('height', d => barScale(d))
    .attr('y', 0);

效果相同

總結

d3還提供了其他常用的API，除了用到的ease()，duration()還有delay()等等
代碼在這（d3庫在build裏）

參考資料

第九章 讓圖表動起來
SVG 圖像入門教程——阮一峯
selection.transition()