如何自学 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-selectiond3-scale 模块
  • d3-selection
    该模块便是用于操作 Document 的。
    其中的 selection.dataselection.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》

推荐阅读更多精彩内容