在数据可视化的世界中，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 学好，可谓是在前端开发中，更填一大利器！
您可能感兴趣的文章
- 小米激荡十年：雷军的进与退
- 易车编辑如何做到每天生产一万篇文章？
- 如何打广告不会让人反感？
- ccflow 驰骋工作流引擎版本升级公告
- 全面上云：阿里云攻下传统IT的十年战事
- 中国有900多万人从事刷流量产业
- 百度ERNIE2.0强势发布
- 这些年来的互联网风口，你追了吗？
未经允许不得转载：杂烩网 » 如何自学 D3
