d3.js入门学习

Posted 2021-01-18 桔子桑

个人感觉前端数据可视化是个趋势，并且现在所在公司也是有做这块的项目，虽然我目前还没有接触到公司数据可视化的项目，但是，今后总是要接触的嘛。

今天看了一下公司目前所用的两种数据可视化工具---D3和ECharts，ECharts由于是国产的，文档和demo都很全，简单看了一下，感觉很好上手，没有必要把太多时间花在ECharts上，反观D3，中文文档很匮乏，api讲得也不是很易于理解，但是D3很火啊，功能很强大啊，所以，我决定开始学习D3。

通过查询，大概知道了D3就是通过js来操作DOM，包括但不仅限于创建节点、节点绑定数据，所以D3大概就是将源生js操作DOM的方法做了封装，并且借助H5的svg标签来绘制图形；

说到H5的图形绘制，有svg和canvas；svg是矢量图，放大不失真，canvas是位图，放大失真，但是canvas更适合做游戏开发，说到游戏开发就不得不说js游戏引擎了，听说白鹭引擎挺不错~咳咳，跑题了。下面开始记录D3相关API的使用（图文教程，你值得拥有，如果有不对的地方也欢迎提出）

一、为项目引入D3

我这里是直接在vue项目中引入d3的，项目目录下：npm i d3

随便打开一个文件（.vue），切记，这里在main.js里import是无效的，要到用到D3的组件/页面l里import D3，如下：

import * as d3 from ‘d3‘;

二、开始表演

正如你所看到的的那样，当前页面有一个类名为skill的div，里面有两个空白的p标签，接下来，我要通过D3为其导入数据：

稍微有点js基础的都就能看出这句话的意思，只不过这块有两个知识点需要提一下：

①链式语法，原理就是每个方法执行结束之后返回特定对象或者this对象（具体可查阅java23种设计模式）

②这里的init()数据初始化操作要放在Vue实例的mounted生命周期，created生命周期亲测无效（具体参考vue生命周期）

三、检查结果

ok，就这样，D3已经在vue项目中成功运行，更多d3相关，敬请期待我后续博客！