d3.js入门学习

Posted 桔子桑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了d3.js入门学习相关的知识,希望对你有一定的参考价值。

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

今天看了一下公司目前所用的两种数据可视化工具---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相关,敬请期待我后续博客!

以上是关于d3.js入门学习的主要内容,如果未能解决你的问题,请参考以下文章

d3.js入门学习

译Learn D3 入门文档: Introduction

d3.js学习笔记

D3.js 入门系列 — 11 入门总结

D3.js 入门系列 — 0 简介和安装

D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形