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>.