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

章節連結

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

    延伸閱讀

    GA瀏覽人氣:7