如何自学 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》

推荐阅读更多精彩内容

  • 初次接触 web 图表开发的工程师,面对众多的可视化工具库难免会有疑惑,比如说: 这库的产品定位? 哪个更好学? ...
    子龙0322阅读 19,160评论 0 29
  • 对于一个企业来讲,品牌是最贵的东西?其实不是,如果一个企业没有了客户、用户,那这个企业就成了一个空壳子。即使产品再...
    微步谷晓翠阅读 825评论 0 0
  • 我记得小的时候还不会穿衣服,早晨被妈妈从被窝提溜出来,冻的瑟瑟发抖,妈妈从被窝里掏出我的小花袄给我披上,我总是是仰...
    雨涟含风阅读 205评论 4 5
  • 佛家三境界。人生有三重境界,这三重境界可以形象地比喻为:看山是山,看水是水;看山不是山,看水不是水;看山还是山,看...
    hhhxcc阅读 72评论 0 0
  • 大学里有这样一部分人,他们整天跑来跑去,发传单,做家教,推广东西…… 不需要家里的生活费,自己赚的钱也能让自己活的...
    _像我这样的人阅读 6,278评论 4 125