D3js官网：https://d3js.org/
最近在研究D3js，索性总结一些文档出来，来总结一周以来的学习心得。
D3js官网全英文，相对于Echarts官网详细的文档，英文不好的同学，学起来可能要费劲些，不过有伙伴有中文翻译版的，附上链接：https://github.com/d3/d3/wiki/CN-Home
D3Js是什么
D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一，它被很多其他的表格插件所使用。D3使你有能力借助HTML，SVG和CSS来生动地可视化各种数据。D3不需要你使用某个特定的框架，它的重点在于对现代主流浏览器的兼容，同时结合了强大的可视化组件，以数据驱动的方式去操作DOM。
浏览器支持
D3js和ECharts一样都是实现数据可视化的JS库，比较D3js和ECharts
- D3支持的主流浏览器不包括IE8及以前的版本。D3测试了Firefox、Chrome、Safari、Opera和IE9。D3的大部分组件可以在旧的浏览器运行。
- ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
安装
常用的引入方式：
- script标签引入
- npm命令安装
npm install d3
由于D3版本v5和v4/v3存在较大的变动，本篇文章主要以v3为主，依次由浅入深的聊一聊d3js的具体使用。
D3如何用
api官网 https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C
简单了解下，以下的demo要用到：
选择器
Hello World!
Hello World!
d3提供了丰富的dom操作，有点类似于jQuery的用法。
d3.select() 选择的是符合条件的第一个元素，它指定的为一个元素；
括号里面可以写标签、也可以写class名，id名，这点与jQuery神似
d3.select('body') //指定body标签内
或
d3.select('.red') //指定标签class名为red的第一个标签
或
d3.select('#blue') //指定标签ID名为blue的第一个标签
d3.selectAll('p') 选择的是所有p标签的元素，它指定的为一个集合；
.text('你好') 指定文档内容 content
p.style() 就是对p元素定义css样式
整个代码执行下来 结果就是两行红色字体的 你好！
d3的很多写法都类似于jQuery，并不那么陌生。
datum
Hello World!
Hello World!
数据可视化的源泉在哪？dataset是数据源；
- selection.datum - 取得或设置单个元素的数据，不必计算连接。
p.datum() //p标签的元素设置为str这个外部源
p.text() // 括号里接收一个函数回调，d就是str的值， i是索引
最后输出的结果：
第0个元素绑定的数据是china
第1个元素绑定的数据是china
data
Hello World!
Hello World!
- selection.data - 在计算相关的连接时，取得或设置一组元素的数据。
数据源有3个，而p标签仅有两个元素，所以输出到页面的结果为：
I like dogs
I like cats
svg
append 添加svg标签
attr svg设定宽高
柱状图
运行结果：
这里面注意到
.enter() 作用是在为缺失的元素返回占位符
线性比例尺
d3.min() 返回最小值
d3.max() 返回最大值
d3.scale.linear() 构建一个线性比例尺
.domain() 取得或设置比例尺的定义域
.range() 取得或设置比例尺的输出范围
序数比例尺
线性比例尺的柱状图
带x轴的柱状图
输出结果为：
带xy轴的柱状图
带动画效果的柱状图