【 随笔 】 D3 难吗？

有不少朋友说学 D3 挺难的。为什么呢？想写一篇文章分析分析。

1. D3 出现的背景

D3.js 是 Github 上的一个开源项目，用于数据可视化。作者是 Mike Bostock，纽约时报的工程师。现纽约时报上各种数据新闻的可视化图表，都是基于 D3 制作的。

数据新闻，是近年来十分热门的一个行业，在互联网新闻里，添加上生动的数据分析，以图形的形式展示，简单易懂。

数据新闻是随着大数据时代的潮流而出现。各公司和机构能掌握的数据越来越多，例如谷歌掌握了数以千万亿的搜索数据，沃尔玛掌握了全球的零售数据。如此大量的数据，在以前要处理是难以想象的，大部分数据或者没有保存下来，或者保存下来了也不受重视，因为数据太多处理不了。

但是，如今计算机的能力已大幅度提高，硬件基础不再成为问题，使用大数据来分析问题自然而然也成为了趋势，因此目前被称为大数据时代。关于大数据是什么，可参见我总结的文章：

【 大数据时代需要转变的思维 】

对于大量数据的处理中，有数据获取、数据分析、数据简化等等，还有数据可视化。数据可视化是将数据呈现给用户的方式。请问，你是看图像舒服，还是看一堆数字舒服？

D3 就是在这种趋势下诞生的。当然，与之一起诞生的可视化库还有很多，例如，processing.js、echarts等。但是，D3 绝对可称得上是该领域的佼佼者，关于各种 JavaScript 库流行度的分析，可阅读：

【 JavaScript 图形库的流行度调查 】

2. D3 的优势

可视化的库有很多，基于 JavaScript 开发的库也有很多，D3 有什么优势呢？

（1）数据能够与 DOM 绑定在一起

D3 能够将数据与 DOM 绑定在一起，使得数据与图形成为一个整体，即图形中有数据、数据中有图形。那么在生成图形或更改图形时，就可以方便地根据数据进行操作，并且，当数据更改之后，也能简单地更改图形。

（2）数据转换和绘制是独立的

将数据变成图表，需要不少数学算法。很多可视化库的做法是：

提供一个函数 drawPie() ，输入数据，直接绘制出饼状图。

但 D3 的做法是：

提供一个函数 computePie()，可将数据转换成饼状图的数据，然后开发者可使用自己喜欢的方式来绘制饼状图。

虽然看起来 D3 使得问题变得麻烦了，但是在图表要求比较复杂的时候，直接绘制的饼状图往往达不到要求，细微的部分没有办法更改。而 D3 将两者分离开来，就极大地提高了自由度，以至于开发者甚至可以使用其他的图形库来显示 D3 计算的数据。

（3）代码简洁

JQuery 是网页开发中很常用的库，其中使用了链式语法，被很多人喜爱。D3 也采用了这一语法，能够一个函数套一个函数，使得代码很简洁。

（4）大量布局

饼状图、树形图、打包图、矩阵树图等等，D3 将大量复杂的算法封装成一个一个”布局“，用于转换数据。能够适用于各种图表的制作。

（5）基于SVG，缩放不会损失精度

SVG，是可缩放的矢量图形。D3 的绘制大部分是在 SVG 上绘制的，并且提供了大量的图形生成器，使得在 SVG 上生成图形变得简单。

另外，由于 SVG 是矢量图，放大缩小不会有精度损失。

3. D3 难学吗？

D3 有那么多好处，那么，D3 难学吗？

我了解到，有不少朋友认为 D3 挺难学的。

我总结了一下，D3 难学的原因有三：

（1）官方文档写得不好

官网上提供了 API 的资料，还有大量的例子。但是，每个例子怎么做的只有代码，没有文字说明。API 虽有说明，但是也却没有太多函数的使用例子。这就使用初入门的人感觉头大。

（2）不容易适应数据转换和绘制分开的模式

一个函数，drawPie()，输入数据，输出绘制图形，一般人的思维模式是这样的。但是，D3 偏偏将两者分开了，分开之后能带来极大的自由度，但是也使得它变得有些难学。

（3）外语不好

对大部分国人来说，看英文文档还是挺头疼的。由于我比较熟练地掌握了日语，刚开始是阅读的日文资料，因此入门较易。中文资料应该说还是比较匮乏的，不过近期已有所改善。毕竟是比较新的东西，慢慢资料会多起来的。

 

D3 乍看上去，有些难学，但是一旦掌握了，就能适应各种图表的制作，自由度极大，功能极强。有人说，D3 就像是 Photoshop，其他的库就像是美图秀秀，前者需要一定的时间学习，学成后在图像处理上所向披靡，后者不需要学习时间，会和不会没有太大的价值。这么比喻可能有点夸张，我有一个更好的比喻（灵感来源自辜鸿铭先生的文章）。

D3 就像是写毛笔字，其他的可视化库就像是写钢笔字。钢笔字上手容易，下笔简单，快捷，写出来的东西叫做文章。毛笔字需要长期磨练，上手较难，但是一旦掌握了，便能行云流水，心随念想，可进可退，只在笔尖，写出来的东西叫做艺术。

 

谢谢阅读。

文档信息

• 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
• 发表日期：2015 年 4 月 28 日
• 更多内容：OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
• 备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢