D3.js是什么？

现在的前端和以前相比已经有了翻天覆地的改变，从混沌时期的原生 JS 到以操作 DOM 为主的 jQuery，再到三大框架 React、Angular 和 Vue，Node.js 让前端程序员们也有能力把手伸向以前从未踏足过的服务端领域，Electron 让前端程序员制作桌面应用成为可能，树莓派/Ruff 让 JavaScript 在物联网（IOT）中也有了一席之地。

而本文所讲的 D3.js 是数据可视化这一门类的库，JavaScript 再下一城池。

D3.js 是什么

D3.js（或称 D3，指 Data-Driven Document，数据驱动文档）是一个 JavaScript 库，以操作文档对象模型（Document Object Model，DOM）树的方式向用户直观地展示数据信息，现已成为网络中信息图形的事实标准。

1) D3 不是图形库，而是一个 DOM 操作库

尽管它的受欢迎程度很高，但它的学习曲线并不平坦。当然，我本人并不认为 D3 很复杂，也并不认为其庞大的 API 阻塞了开发者的学习道路（虽然说确实不少，但它的 API 结构和设计都很棒）。相反，我认为新用户遇到的许多困难都来自于他们想得太多。

因为人们经常看到由 D3 开发的令人惊艳的图表，所以开发者们自然而然地将其视为一个“图形库”，他们从内心深处认为 D3 安排了图基，从而为常见的绘图类型提供了高级支持。

正是这种先入为主的期望让用户在设置元素的颜色时面对冗长的指令感到不爽，这个“选择集”（selection）功能是做什么的？我直接用 canvas 画不行么？

这里的错误就是 D3 不是图形库。相反，它是一个操作 DOM 树的 JavaScript 库。

D3 的基本构建单元不是圆形或矩形，而是节点和 DOM 元素。D3 并不涉及在 canvas 上绘制图形形状，而是通过属性来设置元素的样式。元素的“当前位置”和 canvas 上的 xy 坐标没有相似性，而是从 DOM 树节点的选择集中获取。

2) 学习 D3 无需深入演技 Web 前端技术

接下来是让新用户望而却步的第二道坎。D3 作为和网页相关的技术，同样也依赖着其他的网页技术，比如 DOM API 和事件模型、CSS 选择器和属性、JavaScript 对象模型，当然还有可缩放矢量图形（Scalable Vector Graphics，SVG）。在大多数情况下，D3 没有很深入地使用这些技术，且其自身的设计也处处反映了底层 API。

这就让环境一下子变得复杂了起来。如果你已经对 HTML5 等现代 Web 技术栈很熟悉了，那么你就会觉得毫无压力，否则的话，没有特定的抽象思维可能会让你感到困惑。

值得庆幸的是，你无须深入研究所有这些基础技术。D3 为了让用户易于理解提供了大量的统一封装。

唯一一个需要了解的技术是 SVG。你必须花时间来充分了解它，不仅要了解指代的元素，还要了解图形中控制信息组织的结构元素。如果你不熟悉 SVG，那么我真诚地建议你在学习 D3 之前先自行学习一下。

为什么选择 D3

为什么 D3 能够获得程序员和科研人员——甚至是非 Web 开发人员的青睐呢？

1) D3 提供了一种通过 Web 构建图形的便捷方式。

如果你从事的是数据和可视化工作，通常来说你会在绘图程序中输入数据，然后将结果保存成 PNG 或 PDF，接下来创建一个带有 <img> 标签的网页，以让他人看到你的工作。如若可以一键完成上面这些步骤，何乐而不为呢？

2) 更重要的是，D3 简化了创建动画和交互式图形的方式。

这一点也许不应该过分强调：同其他领域一样，科学可视化也可以从动画和交互当中受益——虽然众所周知这个目标在过去很难实现。它经常需要加入一些复杂或不匹配的技术（听过 Xlib 编程吗？），抑或是添加一些专业但昂贵的商业软件包。D3 让你把上面的一切都抛诸脑后，将最现代的可视化需求呈现在你的面前。

3) 除了图形之外，D3 是一个易学易用的框架，擅长做通用的 DOM 处理。

如果你偶尔需要操作 DOM，那么 D3 将满足你的需求，并且无须掌握其他框架和 API 来编写网页。该库的设计也很巧妙，作为一个模型，它提供了“开箱即用”的功能来处理常见的数据操作和可视化任务。

说了这么多，其中最无可比拟的是 D3 是一种开放技术，用户通过它可以创造无限的可能性。最棒的 D3 应用永远在路上，你就是它的缔造者。