《Getting Started with D3》填坑之旅（一）：开篇

D3 vs ECharts

最近做了些数据可视化方面的项目，偶然间发现 D3 这个强大的基于 JavaScript 的可视化工具库，并惊叹其 GitHub 上的热度，竟然 远超 一度被（我自己）公认为 可视化神器 的 ECharts——

（统计时间：2020-04-04）

GitHub 指标	D3	ECharts
Star（点赞）	90.7k	40.3k
Watch（关注）	4k	2k
Used by（被引）	83k	64.6k
Fork（叉取）	21.9k	13.6k
releases（发布）	100	262
contributors（贡献者）	96	121

于是，借助前期对 JavaScript 的迷之自信与对 O'Reilly 的盲目崇拜，在网上轻轻松松找到了这本仅 70 页篇幅的资源——《Getting Started with D3》，开始了漫漫填坑之旅。。。

本书特色

这本小册子写于 2012 年，书中的 D3.js 版本为 2.8.0，所以和目前的最新版 5.15.1 在语法上还是有很多不同。书中示例均出自 MTA——纽约大都会交管局，目标读者是数据相关从业人员，包括高校研究员、统计师或设计师等喜欢撸码并乐于玩数据（不然也不会有精力去填坑）。本书主要特色大致如下：

• 跳过前期储备知识讲解（HTML、CSS、JavaScript、SVG、canvas），直奔 D3 主题
• 结合纽约交通具体案例，讲解 D3 基本概念
• 随书源码提供了数据清洗的完整脚本（Python 版，待填坑）
• 篇幅简短，上手很快
• 挖坑无数

相关准备

1. 示例代码

当时想着只是入门，重点在了解基本概念，版本影响应该不大，结果第一次练手就卡在了 d3.json() 的新旧写法上，无奈之下只有先按老版本过一遍代码，后期再尝试更新。随书源码位置：

GitLab：https://resources.oreilly.com/examples/0636920025429.git

Gitee：https://gitee.com/PeacefulWinter2020/Getting-Started-with-D3.git

这里的 Gitee 版是为了方便大家快速同步到本地，特意从 GitLab 上迁移到 Gitee 上的。

git clone https://resources.oreilly.com/examples/0636920025429.git
git clone https://gitee.com/PeacefulWinter2020/Getting-Started-with-D3.git

2. 测试服务器

由于书中不少示例的数据源是 JSON 文件格式，需要在服务器环境下运行。书中给出的方案是 Python 版 SimpleHTTPServer。其实只要是个服务器就行，如 Tomcat。这里用到的是 VSCode 插件 Live Server 5.6.1，编辑器内直接右键【Open with Live Server】即可运行。

下面，我将从头到尾，按书中示例的顺序，逐一梳理这本小册子给大家精心准备的 D3 小确丧。。。

• 《Getting Started with D3》填坑之旅（一）：开篇
• 《Getting Started with D3》填坑之旅（二）：第一章
• 《Getting Started with D3》填坑之旅（三）：第二章（上）
• 《Getting Started with D3》填坑之旅（四）：第二章（下）
• 《Getting Started with D3》填坑之旅（五）：第三章（上）
• 《Getting Started with D3》填坑之旅（六）：第三章（下）
• 《Getting Started with D3》填坑之旅（七）：第四章（上）
• 《Getting Started with D3》填坑之旅（八）：第四章（下）
• Chapter 5. Layout（布局）（整理中）
• Chapter 6. Conclusion（尾声）（整理中）