Learn D3.js — 全书拆解Copy Anchor Link

30 秒导读: 这是一本 2026 年的 D3.js v7 实战教材,回答一个问题: 怎样用网页标准(HTML/CSS/SVG/Canvas)把数据变成可交互的图。 它的答案不是「图表模板」,而是一台翻译流水线:数据进、函数加工、图形出。 全书 19 章的正文,就是把这台流水线的每个工种各讲一遍。 本组文档是我们重写的完整拆解,二十二篇。读完不必看原书。

1. 先交代清楚:这是谁在什么时候写的Copy Anchor Link

时代坐标: 写于 D3 v7 已是成熟版本的年代。Observable 平台被当作 D3 的主社区, Canvas 渲染、大数据交互成为常规话题;TypeScript、框架集成(npm/React)被刻意排除在正文外, 只在附录各给一篇指引。

2. 全书一条主线(读完这一节,你就懂了这本书)Copy Anchor Link

这本书从头贯到尾只有一条推理链:图表是「数据 → 函数 → 图形」的翻译, 而翻译的每一环,都可以也应该由数据驱动。 下面把这条链走一遍—— 只讲「发生了什么、为什么只能这样」,机制细节全在对应篇章里。

① 一切从「绑数据」开始Copy Anchor Link

不用 D3 也能画图(手写 SVG 标签就行)。D3 真正的发明是: 把一批网页元素和一批数据绑在一起,让数据说了算——数组多一项就多一个元素, 少一项就删一个。这一个动作(data + join)是后面十八章全部内容的根。 (第 01 篇)

② 绑好之后,数据要先进得来、洗得动Copy Anchor Link

真实数据在外部文件里:CSV(逗号分隔的表格文本)/JSON(网页数据交换的通用文本格式)经 d3-fetch 一步加载, 表格字符串经 d3-dsv 解析(值全是以文本形式存着的数!行函数边解析边加工); 进来之后还要找最大最小、排序、分组、分箱——d3-array 是这套「数据车间」。 (第 04、06、07 篇)

③ 数据是数,图形是像素,中间隔着比例尺Copy Anchor Link

数据的量级(0.387 到 67.67)和画布的像素(0 到 500)之间, 需要一个翻译函数:比例尺。它把「数据域」映射到「像素域」, 线性(等比例)/对数(按数量级压缩)/序数/时间各管一类输入。坐标轴只是比例尺的可视化—— 没有比例尺就没有轴。(第 08、09 篇)

④ 点线面饼树,全是「生成器函数」Copy Anchor Link

从数据到 path 字符串的距离,由生成器抹平:d3.line() 吃坐标吐折线、 d3.area() 加基线(面的下边界)成面、d3.arc() 出扇形、d3.pie()/d3.stack() 先重排数据再喂给前者。 记住生成器的两分类:形状生成器产字符串,布局生成器产数据——这是全书中段的主结构。 (第 11、12 篇)

⑤ 图会动了,而且会回应用户Copy Anchor Link

给属性修改加一行 transition,数值就平滑过渡(背后是插值器逐帧算中间值); 给元素挂上行为对象,拖拽、框选、缩放就有了语义事件。 缩放的真功夫在「语义缩放」:轴要重算、线宽要除以缩放系数、细节要分级出现。 (第 13、14、15 篇)

⑥ 层级数据与网络数据,换两种「中间表示」Copy Anchor Link

树、矩形树图、圈包共享同一个 hierarchy 对象(数据 → hierarchy → 布局 → 图); 网络数据分两种形态(矩阵(二维数表)/ node-link),各配一类图(弦图 / 桑基图 / 力导向)。 力导向是全书唯一的「模拟式布局」:位置不是算出来的,是冷却出来的。 (第 16–19 篇)

⑦ 地图:把「投影」也变成一个函数Copy Anchor Link

经纬度到像素的翻译器叫投影,一百多个,分三大类;geoPath 把 GeoJSON (开放标准)+ 投影缝成 path。专题地图(choropleth、点密度)就是把第 ③④ 步的 比例尺与生成器,搬到地理数据上——全书在这里合龙。(第 20、21 篇)

⑧ 一句话压缩Copy Anchor Link

D3 教你的是「数据驱动」的思维方式:先问数据长什么样,再问哪条流水线能把它变成图; 图不对时,回去改数据或改翻译函数,而不是改图形。 这与给模板的图表库是两条相反的路——前期多写代码,换来任意图形的自由。

3. 章节地图Copy Anchor Link

这张表不用记任何术语——每一篇的名字后面,写的是「读完你能回答什么问题」。

推荐顺序: 01 → 03 → 05 → 09 是地基,之后按图索骥; 只想了解「D3 的思想骨架」,读第 2 节(本页)+ 01、05、16 三篇就够。

4. 这本书覆盖什么、不覆盖什么Copy Anchor Link

覆盖(而且讲得比多数材料扎实)—— 读完你能回答:

• 数据绑定的内部机制(enter/update/exit 对账、key 函数),不是只会调 join;
• 比例尺/坐标轴/颜色三件套怎么按数据类型选型;
• 形状生成器与布局生成器的两分法,以及各自怎么配访问器;
• 过渡动画的生命周期与多过渡编排(命名、链式、打断规则);
• 拖拽/刷选/缩放三个行为的完整配置,以及组合时的冲突处理;
• 层级(hierarchy)、网络、地理三条高级数据线的完整流水线;
• 大量「为什么会这样」的坑:字符串数值、CSS 优先级、SVG 命名空间(浏览器靠它认出 SVG 标签)、缠绕顺序……

不覆盖(别指望在这本里找):

5. 我们的判断Copy Anchor Link

判断(我们的,不是书里的): 这本书在今天的价值排序是—— ①「数据驱动」心智模型的完整教材(不过时)> ②各工具的选型地图(轻微过时)> ③环境配置的实操细节(已半过时)。 它最适合当「D3 唯一一本系统教材」来读;遇到具体 API 查 d3js.org,遇到具体图型查 Observable。 如果错,会错在: 如果数据可视化的主流范式从「命令式 DOM 操作」迁走 (比如全面转向 WebGL 声明式框架),D3 这套以 join 为中心的教学骨架会失去中心—— 但以 2026 年的生态看,这个迁移还远未发生。

判断(我们的,不是书里的): 全书最值得带走的可迁移技能不是任何 API, 而是三个反复出现的设计模式:「配置与执行分离」的生成器函数、 「数据重排 → 图形渲染」的两阶段布局、以及「中间表示」(hierarchy 对象、 邻接矩阵、GeoJSON)作为数据与图之间的稳定接口(两边都认的中间格式)。 这三个模式在 D3 之外(自己写任何 DSL、任何图表库)都直接复用。 如果错,会错在: 把模式当银弹——每个模式都有代价(学习曲线、间接层、双重内存), 小项目里直接字符串拼 DOM 可能更快;模式的价值随项目复杂度上升。

判断(我们的,不是书里的): 对「编程语言与系统研究」的读者,这本书有额外的读法: D3 是领域特定语言(DSL)设计的活标本——链式 API、函数生成器、访问器约定、 流式管道(投影五段),每一个都是语言设计的决策案例,而且每一个都有 15 年的社区检验。 读的时候多问一句「这个 API 形状为什么是这样」,收益会翻倍。 如果错,会错在: DSL 视角会放大「API 美学」的权重,而工程视角里更要紧的是 生态(插件、示例、招人)——两者不矛盾,但别用前者替代后者的评估。

6. 许诺兑现表Copy Anchor Link

---

拆解写于 2026-10-19,依据 Packt 第二版(2026-06)。原始书籍文件不入库, 本组文档是我们自己的重写;每条引用都可用 node scripts/book-verify.mjs learn-d3js 回核。