D3.js数据可视化

你的淘宝年度消费报告那炫酷的图表一会儿让人忘了本身花了多少钱，各大门户网站、媒体都开始大量使用图表，因而乎又有一批工具等待咱们学习的路上

什么是D3.js

D3.js（全称：Data-Driven Documents）大概翻译过来就是数据驱动文档，一看到后缀名的.js就放心了，只要你以前有Javascript的语言基础就能够开始D3.js了，其实它就是一个JavaScript库，和jquery同样都是封装好的JS库，只不过做用不一样，D3.js主要是作数据可视化的，也就是各类炫酷的图表，好比折线图、弦图、力导向图等等，而jQuery主要是作页面DOM控制、AJAX和动画的。

D3.js和以前用的echarts.js有啥不一样

D3.js和echarts.js都是用来生成各种图表的，区别的话能够从使用方法和实现方式上,echart.js是经过canvas来绘制图形具体使用方法是经过echarts.init 方法初始化一个 echarts 实例并经过 setOption 方法生成一个简单的柱状图很轻松搞定。D3.js经过svg来绘制图形,使用时须要先建立画布(svg元素),而后进行各类绘制图形。

从兼容方面对比二者的话,echart.js兼容到IE6及以上的全部主流浏览器，而D3.js兼容IE9及以上以及全部的主流浏览器，若是项目考虑兼容IE6，建议使用echart.js

从学习成本上来讲,echart.js是封装好的方法能够直接调用,学习起来更加快速上手,而相对来讲D3.js的学习偏底层学习起来成本较大,也正由于如此D3.js也有更大的灵活性,当你须要的图表中echart中找不到时能够来D3中本身搞定

D3.js图表有多炫酷

这里能够看到官方首屏的截图感觉下

D3.js怎么使用
在D3官网（https://d3js.org/）选择Download the latest version (5.5.0) here点击进行下载，直接将下载的d3.js引入到页面当中或者经过网络链接进行引入
<script src="http://d3js.org/d3.v3.min.js&...; charset="utf-8"></script>.