如何自学 D3

在数据可视化的世界中，D3 可谓极其耀眼的明星。
很多人着迷于 D3 那近乎无限可能的图形开发能力，而又被 D3 那海量的 API 所困住，往往学了很久却不得其道。
(还不了解 D3 的同学，可看《D3 vs G2 vs Echarts》)

下面，我以数据可视化开发为目的，说下我的 D3 入门路径：

一、学习 SVG

D3 全名为 Data Drive Document，即通过 Data 操作 Document，而在做数据可视化时，Data 最常 Drive 的 Document 便是 SVG。
SVG 的学习，可看阮一峰老师的《SVG 图像入门教程》。
 

二、学习 d3-selection 和 d3-scale 模块

• d3-selection
  该模块便是用于操作 Document 的。
  其中的 selection.data 和 selection.enter 是初次接触较难理解，但必须掌握的概念。
  掌握了这个模块后，我们再回看阮一峰老师的教程，会发现教程中的例子，用 D3 实现起来是那么的容易...
• d3-scale
  假如我们想在 800px * 600px 的画布上绘制图表，而我们数据的单位是百万或更大时，这时便需用 d3-scale 将数据通过“比例尺”转为“合适值”以在画布上作图。
   

三、用 D3 做简单的图表

掌握了 SVG、d3-selecetion 和 d3-scale 后，就能开发柱状图、散点图等基础图表了。
 

四、进阶

用 D3 开发柱状图或散点图，只需操作 SVG 的 <rect> 和 <circle> 基础元素即可，非常简单。
但如饼图、堆积图等其图形结构用 SVG 的基础元素并不能实现，此类图表需使用 SVG 的 <path> 标签。
因为 SVG 的 <path> 理论上能绘制任意二维图形，而 D3 则通过指定算法生成对应图表 <path> 的 d 属性值：如折线图的 d3.line()、饼图的 d3.pie()、堆积图的 d3.stack() 等等。
这也为什么 D3 有这么多 API 的一大原因了。

当我们明白这一原理后，学习 D3 便不会太过盲目，而在懂得其核心思想后，需要开发哪类图表，再有针对性地研究、学习其 API 和对应图表的数据结构等知识即可。
另外，Search the Bl.ocks 上包含各类 D3 的 Demo，可供参考。
 

关于 D3 的版本

D3 最新(2018年12月)版本为 V5.x.x
D3 在从 V3 升级至 V4，其 API 命名有大量调整；同时 V4 在模块化和 API 命名的“表达性”上都有着很多值得学习的地方，所以建议直接学 V4 或 V5 版本。（关于其模块化和 API 的设计理念，可看 D3 作者的文章 - 《What Makes Software Good?》）
另外，V5 版本的改动主要是将 V4 中的异步方式改为了 Promise，所以 V5 和 V4 在使用上差异并不大。
 

最后，再次把这张图贴出来：
从图中，可以看出，D3 可做的事儿远不止于数据可视化。(详细请看《D3 is not a Data Visualization Library》)
所以，将 D3 学好，可谓是在前端开发中，更填一大利器！

图片源自《D3 is not a Data Visualization Library》