【D3.js】D3.js入门感悟、学习指南

前段时间因为项目需要，研究了一下D3的用法，做出了一个简单的自定义插件。用在项目中的数据展示与修改部分。

这部分内容不涉及具体的D3概念、用法。只是从一个初学者角度，理解D3, 在D3庞大的API中，弄清楚是为了什么做什么。如果有说的不对的地方，还请各位指教。

1.D3的本质

初听D3.js ， 以为是类似于 Echart.js 的一种展示数据的方法。所以，看了很久也没明白到底怎么去绘制一个折线图，一个饼图；哪个图可以实现拖拽，哪个图可以放大缩小局部…

这是一个误区吧，我觉得。学习D3，首先要明白，D3绘出的图是SVG图。D3做的工作，是将数据转化成SVG的形式，供浏览器渲染成矢量图片。

2.D3的工作

明白了第一点，下面就对D3的外在形式进行分析。很多人使用D3的时候，是用各种图，力图，地图，人物关系图。这些图，是D3集成了一些常见图形设计，直接给开发者使用的API。但，这并不是D3。

D3的提供的主要功能分为：数据计算，图形绘制，DOM选择，事件监听。

3.数据计算

D3提供了一系列的数值计算接口。常见的基本计算，如 random(), min(), max(),map()等。也包含一些负责的计算接口。如，插值计算(linear),比例尺等，用来渲染一系列数值。

4.图形绘制

这个方面跟SVG的用法类似，一般情况会选择 append() 方法生成要绘制的数据的附着节点。打开调试模式，会发现这里全在 SVG 里，所有的图形都为 SVG 的子元素或者后代元素。也会包含一些图形的转换，跟 CSS 类似。如，translate() , rotate()等，对指定图形进行平稳，缩放等操作。

5.DOM选择

其实这部分更准备的应该叫选择器。选择的部分不仅能包含DOM，与D3绘制出的图形(本质上还是DOM)，还有数据选择。常用的API： select() — 与CSS相似，data, enter, exit — 选择数据。其中后面三个，是玩转D3的核心。相信很多教程都有说明，大家可以仔细体会。

6.事件监听

这一部分的功能，保证了D3能够给 SVG 赋予监听事件，完成交互性强的操作。常见的有 mouseMove , click、drag 等。这一部分，是D3完成动态效果，互动效果的基石，很重要，却不难。需要注意的是事件监听过程中的动态绑定与解除，监听绑定的顺序。往往效果与自己想的不一样的时候，仔细检查绑定顺序的逻辑对不对，容易出错。

7.相关链接

https://github.com/tianxuzhang/d3.v4-API-Translation 首推司机大傻-张天旭的开源中文API库，这是张老师组织翻译的官方 D3.js API 开源库地址，内容很详实，可以做为工具书查看。缺点是没有例子。

http://www.ourd3js.com/wordpress/ 重点推荐“数据可视化专题站”，这个网站已经停止维护了。但是里面的内容足够你上手，理解D3开发绘图的过程。从入门到进阶，都是一个不错的选择。

贪多嚼不烂，只推荐这两个教程链接。

关于D3的内容，功用就先介绍这么多。没有很多的细节，是自己在学习过程中，领悟的一些用法，以及走的弯路。适合跟我一样，对D3没有了解过的人，又使用过一些其它绘图框架的人。能从宏观上理解D3的作用，用法。如果能帮到大家，自然十分欣慰，如果有错，误导大家，心里十分不安。在此恳求大家，将错误信息反馈于我，少误人，少误人。