[筆記] TypeScript + D3.js + Vue 3 – 初探 & 畫個長條圖

章節連結

雖說先前用過 Chart.js 做過一些資料視覺化的東西(像是長條圖、折線圖…等),也用它在專案上進行了不少的運用。不過這回要挑戰自由度更高的 D3.js ,讓自己的功力可以更加精進一些。

d3 logo


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


系列文章

  • [筆記] TypeScript + D3.js + Vue 3 – 讓長條圖有 RWD 效果
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上 Tooltip
  • 按讚加入粉絲團

    延伸閱讀