[笔记] 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
  • 按赞加入粉丝团

    延伸阅读