雖說先前用過 Chart.js 做過一些資料視覺化的東西(像是長條圖、折線圖…等)，也用它在專案上進行了不少的運用。不過這回要挑戰自由度更高的 D3.js ，讓自己的功力可以更加精進一些。
D3.js 和 Chart.js 區別
用較淺白的方式來說，Chart.js 已經幫大家定義好了 8 種圖表和好用的互動介面如動畫、提示框和互動事件…等工具，但 D3.js 則是要完全的手工打造。例如說，Chart.js 已經事先幫大家定義好了長條圖的各種輪廓，而 D3.js 則是要親自定義何謂長條圖。
結合 TypeScript 和 D3.js 來畫基本長條圖
D3.js 在下載完 @types/d3 的描述檔後，就可以和 TypeScript 做上良好的搭配。那麼，就來動手畫個基本長條圖。
d3Chart.ts & Vue
建立一個 d3Chart.ts，讓 Vue 的環境可以引入。同時在 vue 的檔案中，就可以用引入的方式，並用 new Instance 的方式來建多個長條圖。
參考來源
1. D3.js新手開發基本圖表系列 第 10 篇
2. vue报错Unexpected aliasing of ‘this‘ to local variable @typescript-eslint/no-this-alias
3. SVG 研究之路 (8) – text 文字
4. Angular window resize event
