前言
近期略有点诸事不顺，趁略有闲余之时，玩起D3.js。以前实际项目中主要是用各类chart如hightchart、echarts等，这些图形库玩起来貌都是完美的，一切皆可配置，但几年前接触了D3以后，以为前面那chart类库局限的地方在于，基本不可定制；而D3呢，你说了算，你想画出什么样的图，你说了算，自由度很大，当时就有点膜拜和仰慕，小打小闹的玩了几下，没有沉下心来专心去玩，当时以为真的很难。不理解，也看不进去。javascript
后面由于接触了react、redux，接触了函数式编程。再回过头来重新捣鼓起D3来，感受没那么困难了，D3其实也有点函数式编程的思路。别被标题吓跑哈，脚踏实地加点毅力D3应该也是能够上手的。html
费话很少说，先上一张让你逆天的数据可视化的效果图，点我查看在线效果java
D3.js基础
- 了解SVG图做图
为何要学习SVG图呢？由于D3.js堪称SVG中的jQuery，固然你若是想用D3输出Canvas图也能够，但SVG图操做起来更加灵活，更加方便调试，在Chrome中调试可让你飞起来。react
- 学习D3.js的语法
语法是必需的，建议自行去官网上学习其语法，或者借/买一本书来同步学习，先尝试实现简单的图形，若是能够的话最好了解一下函数式编程的curry与compose思想，不建议一开始就去接触高大上的众多在线Demo，这样会容易让你误入深渊不能自拔，真的就从入门到放弃。git
- 学习D3.js的编程思路
1）语法其实能够体现其编程思路，起步固然是学习其强大的选择器，下面感受一下github
d3.select("body").style("background-color", "black"); // 直接选择 ->并设置属性 d3.selectAll("p").style("color", function() { // 选择 -> 动态设置属性 return "hsl(" + Math.random() * 360 + ",100%,50%)"; }); d3.selectAll("p") // 选择 -> 绑定数据 -> 动态设置属性 .data([4, 8, 15, 16, 23, 42]) .style("font-size", function(d) { return d + "px"; });
2）接着是理解 Update，Enter 和 Exit 的思路编程
// Update… var p = d3.select("body") // 直接把数据绑定到Dom并输出，数组元素个数与p节点的个数一致就所有更新文本，若是不一致，就只更新现有p节点的文本，多余的数据会被保存起来，看下面会用到 .selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(d) { return d; }); // Enter…[经常使用] p.enter().append("p") // 若是不一致，数组元素个数比p节点多，就插入p节点补足并相应更新文本 .text(function(d) { return d; }); // Exit…[经常使用] p.exit().remove(); // 若是不一致，数组元素个数比p节点少，就删除多余的p节点
3) 而后要学习D3的画图通常思路，好比要画一个线状图，那么咱们：redux
把输入的原始数据转化成为标准的D3可接受的数据格式 -> 根据原始数据定义好x轴函数、y轴函数和定义好做图方式(如d3.line) -> 在SVG上面画出x轴y轴、根据原始数据结合x轴及y轴函数做线状图 -> 再画出标题等细节的东西数组
4) 最后，给已经完成的图形添加动画效果app
没有动画效果的图形看上去会比较乏味。动画基本写法以下：
// 把全部圆圈改变半径 d3.selectAll("circle").transition() // 定义动画 .duration(750) // 动画持续时间 .delay(function(d, i) { return i * 10; }) // 元素动画要延时多少时间开始 .attr("r", function(d) { return Math.sqrt(d * scale); }); // 设置最后效果
D3.js实战项目
注意：下面代码由于结合了React，javascript使用的是ES6，D3版本是最新的V4版，不熟悉的话自行恶补基础。
1、D3实现简单柱状图[在线demo][源代码]
2、D3实现简单简单面积图[在线demo][源代码]
3、D3实现简单简单饼图、圆环图[在线demo][源代码]
4、D3实现径向堆栈柱状图[在线demo][源代码]
5、D3实现简单弦图[在线demo][源代码]
6、D3实现简单打包图[在线demo][源代码]
7、D3实现雷达图[在线demo][源代码]
8、D3实现力导向图[在线demo][源代码]
9、D3实现中国地图[在线demo][源代码]
交流与学习
- 本文做者：Nelson Kuang，别名：Fast Mover 欢迎你们留言及多多指教
- Github地址：https://github.com/nelsonkuang/ant-admin
- 版权声明：欢迎转载学习 => 请标注信息来源于http://www.cnblogs.com/fastmover/p/7779660.html