[筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)

幫 D3.js 繪製出來的長條圖,加上基本的水平、垂直軸 ( X-Y Axis )

d3 logo


核心關鍵

1. 如果你是採取固定寬高度的版本的話,那只要確定寬高度實際範圍跟你的畫面渲染一致即可
2. 每個軸都得使用 Transform 的 CSS 來調整相對位置,預設起點都位於左上角。換言之,若你要正確的顯示 X 軸在下方,那你就得 transform y 的位置到下方開始才行 ( 也就是如 transform(0, 300) ,若你的高度是 300 的話 )
3. 如果你是採取 RWD 版本,得注意高度和寬度縮放的問題,否則軸和圖會對不起來。這時你會覺得跟算數學有 87% 像。
4. 當你做了以上細節後,你會發覺 Chart.js 這個開放套件真的幫眾多使用者節省不少時間

原始碼


參考來源

1. SVG D3.js – 座標軸 ( Axis )
2. Most basic barplot in d3.js


系列文章

  • [筆記] TypeScript + D3.js + Vue 3 – 初探 & 畫個長條圖
  • [筆記] TypeScript + D3.js + Vue 3 – 讓長條圖有 RWD 效果
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上 Tooltip
  • 按讚加入粉絲團

    延伸閱讀