[笔记] 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

  • 按赞加入粉丝团

    延伸阅读