精通D3.js：交互式数据可视化高级编程

《精通D3.js：交互式数据可视化高级编程》全面介绍了D3.js，是比较系统完整的教程。由浅入深，既有基础入门知识，又有相对深入的内容。图文并茂，语言流畅，讲解清晰易懂

本书以当前流行的数据可视化技术D3.js为主要内容，分为三大部分，共计13章。第一部分讲述基础知识，第二部分学习制作各种常见图表，第三部分讲解交互式图表及地图的进阶应用。本书是一个相对完整的D3.js教程，讲解此技术所有重要的知识点，既有基础入门知识，又有相对深入的内容。笔者秉持以下原则：由易到难，循序渐进，图文并茂，清晰易懂。

吕之华，广西桂林人，1989年生。2012年毕业于西北农林科技大学软件工程专业，同年获日本政府国家奖学金赴日，就读于日本岩手大学设计与媒体专业，2015年获得硕士学位。目前正攻读博士学位。
2014年与好友创办OUR D3.JS数据可视化专题站，以D3.js为题发表一系列教学文章，获得读者好评。本书即以专题站的文章为基础扩充而成，经过耐心地归纳、整理、调查、修补，内容更加丰富易懂。
作者喜读儒家经典、三国演义等中国古籍，喜看古装剧，热爱中华传统文化。闲暇时练习书法，养气修身。工作之余喜欢旅游、健身、游泳。不喜与人相争，近来潜心研读儒佛道三家学说。

大数据时代需要可视化工具，D3是世界最流行的可视化函数库。《精通D3.js》手把手教你学会D3，从零讲起直到高级应用，既是教程，又可作为参考手册，查阅D3各种方法的用法。内容图文并茂，示例丰富，帮助你轻松生成各种漂亮图形。

——阮一峰

第1章 D3简介 1
1．1 D3是什么 1
1．1．1 D3简史 2
1．1．2 D3的优势 2
1．1．3 D3的适用范围 3
1．2 数据可视化是什么 3
1．2．1 目的 4
1．2．2 构成要素 4
1．2．3 相关概念 6
1．3 图表种类 6
1．4 学习方法 11
第2章 Web前端开发基础 13
2．1 浏览器和服务器 14
2．1．1 浏览器 14
2．1．2 服务器 15
2．2 HTML＆CSS 16
2．2．1 HTML元素 17
2．2．2 CSS选择器 20
2．2．3 综合运用 23
2．3 JavaScript 25
2．3．1 在HTML中使用JavaScript 26
2．3．2 语法 26
2．3．3 变量 27
2．3．4 数据类型 28
2．3．5 操作符 30
2．3．6 语句 32
2．3．7 函数 34
2．3．8 对象 34
2．3．9 数组 35
2．4 DOM 36
2．4．1 结构 37
2．4．2 访问和修改HTML元素 37
2．4．3 添加和删除节点 38
2．4．4 事件 39
2．5 SVG 40
2．5．1 位图和矢量图 40
2．5．2 图形元素 41
2．5．3 文字 46
2．5．4 样式 47
2．5．5 标记 48
2．5．6 滤镜 50
2．5．7 渐变 51
第3章 安装和使用 53
3．1 安装 53
3．1．1 下载文件 54
3．1．2 网络引用 54
3．2 搭建服务器 54
3．3 HELLO， WORLD 57
3．4 绘制矢量图 58
3．5 调试 59
第4章 选择集与数据 61
4．1 选择元素 61
4．2 选择集 63
4．2．1 查看状态 63
4．2．2 设定和获取属性 63
4．3 添加、插入和删除 66
4．4 数据绑定 67
4．4．1 datum()的工作过程 68
4．4．2 data()的工作过程 71
4．4．3 绑定的顺序 74
4．5 选择集的处理 76
4．5．1 enter的处理方法 76
4．5．2 exit的处理方法 77
4．5．3 处理模板 78
4．5．4 过滤器 79
4．5．5 选择集的顺序 79
4．5．6 each()的应用 80
4．5．7 call()的应用 80
4．6 数组的处理 81
4．6．1 排序 81
4．6．2 求值 82
4．6．3 操作数组 86
4．6．4 映射（Map） 89
4．6．5 集合（Set） 91
4．6．6 嵌套结构（Nest） 92
4．7 柱形图的制作 96
4．7．1 矩形和文字 97
4．7．2 更新数据 101
第5章 比例尺和坐标轴 105
5．1 定量比例尺 105
5．1．1 线性比例尺 106
5．1．2 指数和对数比例尺 109
5．1．3 量子和分位比例尺 110
5．1．4 阈值比例尺 112
5．2 序数比例尺 113
5．3 坐标轴 118
5．3．1 绘制方法 119
5．3．2 刻度 121
5．3．3 各比例尺的坐标轴 122
5．4 柱形图的坐标轴 123
5．5 散点图的制作 125
第6章 绘制 128
6．1 颜色 128
6．1．1 RGB 129
6．1．2 HSL 130
6．1．3 插值 131
6．2 线段生成器 132
6．3 区域生成器 136
6．4 弧生成器 137
6．5 符号生成器 140
6．6 弦生成器 142
6．7 对角线生成器 144
6．8 折线图的制作 145
第7章 动画 151
7．1 过渡效果 151
7．1．1 过渡的启动 152
7．1．2 过渡的属性 155
7．1．3 子元素 158
7．1．4 each()和call() 160
7．1．5 过渡样式 162
7．2 定时器 163
7．2．1 setInterval和setTimeout 163
7．2．2 d3．timer 164
7．3 应用过渡的场合 165
7．4 简单的动画制作 171
7．4．1 时钟 171
7．4．2 小球运动 172
第8章 交互 174
8．1 交互式入门 174
8．1．1 鼠标 176
8．1．2 键盘 178
8．1．3 触屏 180
8．2 事件 182
8．3 行为 183
8．3．1 拖曳 184
8．3．2 缩放 186
第9章 导入和导出 191
9．1 文件导入 191
9．1．1 JSON 192
9．1．2 CSV 194
9．1．3 XML 198
9．1．4 TEXT 199
9．2 文件导出 200
9．2．1 导出为SVG文件 200
9．2．2 编辑矢量图 203
第10章 布局 206
10．1 布局是什么 206
10．2 饼状图 207
10．3 力导向图 213
10．4 弦图 221
10．5 树状图 228
10．6 集群图 234
10．7 捆图 238
10．8 打包图 245
10．9 直方图 248
10．10 分区图 255
10．11 堆栈图 261
10．12 矩阵树图 268
第11章 地图 274
11．1 地图的数据 274
11．1．1 获取数据 275
11．1．2 简化数据 278
11．1．3 GeoJSON 280
11．1．4 TopoJSON 284
11．2 中国地图 285
11．2．1 基于GeoJSON 285
11．2．2 基于TopoJSON 289
11．3 地理路径 297
11．3．1 地理路径生成器 297
11．3．2 形状生成器 301
11．4 投影 306
11．5 球面数学 315
第12章 友好的交互 317
12．1 提示框 317
12．1．1 饼状图的提示框 318
12．1．2 提示框的样式 321
12．2 坐标系中的焦点 323
12．2．1 折线图的焦点 323
12．2．2 为折线图添加提示框 329
12．3 元素组合 334
12．3．1 饼状图的拖曳 335
12．3．2 移入和移出 336
12．3．3 合并 345
12．4 区域选择 347
12．4．1 在SVG画板里选择一块区域 348
12．4．2 散点图的区域选择 350
12．5 开关 353
12．5．1 思维导图的构造思路 353
12．5．2 思维导图的制作 356
第13章 地图进阶 363
13．1 值域的颜色 363
13．2 标注 368
13．2．1 标注地点 368
13．2．2 夜光图 370
13．3 标线 373
13．3．1 带有箭头的标线 373
13．3．2 球状地图的标线 377
13．4 拖动和缩放 378
13．4．1 平面地图 378
13．4．2 球面地图 381
13．5 力导向地图 383
13．5．1 Voronoi图和Delaunay三角剖分 383
13．5．2 力导向的中国地图 387
附录A 彩色插图 393
附录B 参考文献 410

D3（Data-Driven Documents）是一个用于数据可视化开发的JavaScript 库，项目托管于GitHub。GitHub是全世界最流行的代码托管平台，云集了来自世界各地的优秀工程师。D3自诞生以来，不断受到好评，其排名在GitHub的项目仓库排行榜上也不断上升。D3是用于制作可视化图表的，本书以学习此类库的使用为主要目的，不会涉及过多数据可视化的知识。另外，由于数据可视化图表本身就是很直观的东西，如无特殊目的不一定需要深入学习，读者大可放心。

本书适合有一定编程基础的人阅读。对于有JavaScript 编程基础的程序员来说，阅读本书比较轻松。JavaScript 在语法上与C/C++、Java等语言有很多相似之处，熟悉这些语言的读者能很快掌握JavaScript。没有JavaScript 基础也没关系，本书第2 章讲述了必要的知识，足够学习D3了。

本书由浅入深，分为以下三大部分。

一、基础知识

第1 章到第9 章，包括D3 简介、Web 前端基础、选择集、数据绑定、比例尺、生成器等内容。

二、常用图表的制作

第10章和第11章，主要内容是“布局”的使用和绘制地图。

三、深度应用

第12章和第13 章，讲解交互式图表的设计方法，以及基于地图的可视化方法。

通过学习本书，相信读者能在辅以查询API的情况下完成绝大部分数据可视化的工作。笔者尽可能使语言简单易懂，希望能让读者不必埋头盯着几句话去琢磨句子的意思，在思维上不会感到辛苦。但是，学习编程是需要大量练习的，不仅要注重“质”的提升，也要注重“量”的积累。

致谢

笔者是第一次写书，从来没想过写书那么累，需要花那么多时间和精力。这半年来，我得到了很多亲人、朋友的鼓励和帮助，没有他们，我难以想象自己能坚持到最后。

感谢我的妻子，当我感到疲劳时，有她在身边总能感到安心。

感谢我的儿子，现在他还在我妻子的肚子里茁壮成长，估计本书会和他差不多一起诞生，他是我重要的精神支柱。

感谢好朋友曹宇，我们无话不谈，纵古论今。

最后，感谢本书的编辑付睿女士，她协助我完成了对于本书构思，并提出了很多建设性的意见。