d3可视化实战00：d3的使用心得和学习资料汇总

最近以来，我使用d3进行我的可视化工具的开发已经3个月了，同时也兼用其他一些图表类库，自我感觉稍微有点心得。之前我也写过相关文章，我涉及的数据可视化的实现技术和工具，但是那篇文章对于项目开发而言太浅了。于是想写关于d3进行项目实战的系列文章，就像我之前的angularjs实战系列文章一样把整个开发过程中遇到的各种问题及解决办法梳理成章，以为留存。作为开篇，我还是想先把这段时间来我一直参考的资料做一个整理，并谈一些宏观的体会。

一.前方有坑，注意！

—————————————————————————————————————————————————————————————————

1. 首先请注意d3的全称是叫做data driven documents，直译为数据驱动文档，是数据驱动的SVG图形编辑与交互制作的基础类库，而不是什么XX图表库。所以只是寻找简易图表类库直接拿来进行快速项目开发的童鞋，可以直接绕道了，d3不是你的菜，你应该去使用xcharts(基于d3做的图表类库)、echarts(百度的开源类库)、RGraph、highcharts(收费图表库)等等，这些才符合你高效制作图表的需要。而d3就留给那些需要高度定制化的交互图形的制作者用吧。
2. 其次，SVG对IE低版本不兼容。还想兼容IE6，7，8的童鞋也可以绕道了。有研究如何兼容的功夫不如多花在跟客户、老板谈判上，是时候去锻炼一下谈判能力了。
3. 第三，d3的学习曲线比较陡峭，要了解的东西比较多。首先是SVG的基本知识，然后至少会用一种SVG编辑器，比如Adobe Illustrator等等。之后，需要对javascript有比较深刻的了解，对于什么是数据驱动有自己的体会更好。所以，对于连PS不愿意学的纯程序员和填鸭速成的前端工程师而言，如果没有巨大利益驱动，那么还是不做为好。

二.为什么使用d3?

—————————————————————————————————————————————————————————————————

在数据可视化蓬勃发展的新时代，人们已不能满足于静态图片报表或者office excel生成的静态报表，而是需要包含各种交互功能的实时数据展现工具。这就决定了，在web开发领域，那种IE6，7，8时代残留的hacker方法，诸如图片替代和低效的VML方案，都已经过时。必须要使用诸如svg, html5 canvas, webGL这样的技术才能实时数据展现的要求。由于存在着实时交互的数据可视化功能的需求，故而使用这些新技术也是推进使用现代浏览器，摒弃过时的IE浏览器的好机会。

在这些新技术中，webGL还不是很成熟。html5 canvas和SVG则各有千秋，前者兼容性更强，后者开发成本更低。SVG本身是通用图形数据格式，什么放大缩小位移填充动画之类，全SVG属性就能搞定，并且SVG拥有很多设计工具，令这一通用格式在设计上也更为容易。CSS3标准的制定参考了很多SVG的内容，以至于在现代浏览器中，CSS3与SVG完美互补。以上特性决定了SVG很适合进行定制化的可视化工具开发。

在SVG相关的javascript类库中，d3是其翘楚。先不说它的demo如何如何绚丽，github上fork的人如何如何多，作为美国华盛顿大学开发的可视化工具项目，绝对有能力开发诸多应用。d3主推的数据驱动机制，其实与java社区中的对软件开发分层理解一致，对于前端程序员，如果使用过angularjs、emberjs 之类的框架，了解数据-视图双向绑定的机制，那么理解起d3的数据驱动也很容易。除此之外，D3帮助你屏蔽了浏览器差异，做出来图案的效果十分绚丽，可是代码却很简洁，并且在代码风格上近似于jquery的链式风格，很容易理解。如果确认自己的目标是要制作高度定制化的可视化工具，那么d3绝对是个好工具。

d3的成功案例太多，这里有两千多个先拿去看吧。

三.d3溯源

—————————————————————————————————————————————————————————————————

可能是喜欢看历史书的缘故，对于计算机各种程序的历史，我都很感兴趣并着意挖掘，因为一切技术都不是横空出世的，都是有着前期的各种积累，应运时代大潮而生。最早的浏览器netscape诞生于1994年，那时候的网页上只有一种交互操作——点击超链接然后跳转过去。然而随着人们的需求越来越高，网页与越来越多的技术相组合，如javascript, css, flash, svg等等，它们带来了越来越丰富的用户交互。早在上世纪末，人们便希望在网页上图形化地表现数据。D3js之前已经有一系列着眼于图形渲染的web技术，例如依托java开发的processing(2011)， Prefuse(2005)，依托flash开发的flare（2007），以及依托javascript开发的Protovis（2009）。2011年，斯坦福大学的Jeff Heer教授，博士生Mike Bostock，硕士生Vadim Ogievetsky在他们开发的SVG图形渲染类库Protovis的基础上，开发了开源新项目D3js,到现在已经是3.1.4版本了。

四.d3的定位

—————————————————————————————————————————————————————————————————

Processing.js Raphaël

d3.js

Google Charts Highcharts

这里有必要补充一下d3这个类库的定位。在图形处理方面的javascript类库中，d3既不不像processing.js和raphael.js那样特别关注底层图形渲染，也不像google charts和highcharts那样主要是提供定制化的图表接口，而是处于中间层的位置：将dom操作方法封装，结合一套数据集合操作集，如此提供基于数据驱动实现图表的方法。查看到d3 API，我们可以看到其中提供的方法大部分是数据集合操作和html or svg dom操作，还有一批专门用于各种图形显示的布局方法。

jquery prototype

backbone

angular.js ember.js

如果非要类比一下，我觉得d3.js有点类似于backbone.js在各种前端类库中的位置。backbone既不像jquery或者prototype那样关注于底层dom操作方法的实现，也不像angular和ember那样是一个MVC重型框架，而是处于中间的位置：只是将一套基于MVC数据封装结构结合着基于underscore的数据集操作方法提供给用户，以实现轻量级的、灵活性最大的前端MVC编程。

如果把最终追求替换成实现交互图表，最低追求替换成底层图形渲染，那么第二个表就可以完全被第一个表替换。所以我认为可以称d3为图形操作领域的轻量级框架。d3和backbone都是各自领域的轻量级框架，好处是灵活方便，同时还有很多已有的数据操作方法可用，但为此必然会付出更多的定制成本。好在d3的案例和学习资料很多，照瓢画葫芦并不是很难。

五.学习资料汇总：

—————————————————————————————————————————————————————————————————

最系统全面的培训教程，包含收费培训项目：

https://www.dashingd3js.com/d3-training

d3 wiki，包含介绍和API，必须参考的内容：（有部分汉化）

https://github.com/mbostock/d3/wiki

如果觉得内容太多，那么光看下面这本d3 cockbook，研究一下里面的例子，也可以速成，方便非深度玩家使用。

http://nickqizhu.github.io/d3-cookbook/

最后是一些书籍，都有在线版本可以直接查看。其中第一本有中文版，讲的很浅显，我有一本。

Safari Books Online has the content you need

	Interactive Data Visualization for the Web shows you how to create and publish your own interactive data visualization projects on the Web – even if you have little or no experience with data visualization or web development. It’s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser.
	Developing a D3.js Edge D3 is a powerful framework for producing interactive data visualizations. Many examples created in the real world with D3, however, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
	Data Visualization with d3.js walks you through 20 examples. You can finally stop struggling to piece together examples you’ve found online. With this book, you will learn enough of the core concepts to conceive of and build your own visualizations from scratch. It begins with the basics of putting lines on the screen, and builds on this foundation all the way to creating interactive animated visualizations using d3.js layouts.
	Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.