[筆記] TypeScript + D3.js + Vue 3 – 讓長條圖有 RWD 效果

Posted onAuthorANDY LIEN

章節連結

用 D3.js 來畫製一個可以隨畫面變化的長條圖吧。

d3 logo

核心關鍵

1. 第一次載入時，繪製第一版，並留下原始目標 DIV 的寬度和高度資料。
2. 當畫面變化時，先清除掉原本目標 DIV 內的東西，然後再重新繪製新的。

d3Chart.ts & Vue

建立一個 d3Chart.ts，讓 Vue 的環境可以引入。並在 vue 的檔案中，使用 new Instance 後，再使用 rwdDraw() 的方法。

參考來源

1. 利用 d3.js 製作 responsive 的長條圖
2. D3.js v4 Example/Tutorial: Responsive Bar Chart

系列文章

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

    延伸閱讀