精通D3.js （第2版）9787121315053

前 言

 D3（Data-Driven Document）是一个用于数据可视化开发的JavaScript库，该项目托管于GitHub。GitHub是全世界最流行的代码托管平台，云集了来自世界各地的优秀工程师。D3自诞生以来，不断受到好评，其在GitHub的项目仓库排行榜上排名已高居第2位（2017年3月）。以一个可视化工具而言，能取得这种成就可谓奇迹。

 使用者众多并不意味着一个工具一定好，但一定意味着它拥有更多的教程、示例代码、社区问答和出版物。D3由于其庞大的用户量，几乎已经成为数据可视化的代名词。

 本书希望尽可能让零基础的读者也能阅读，但这或许很难。你也许需要至少掌握一门编程语言，例如C/C++、Java、JavaScript，并了解网页编写的基本知识。

 学习本书后，相信读者能在查询API的情况下完成数据可视化的工作。为使阅读尽量简单、易懂，本书附带非常丰富的插图。用图而不用文字，这也正好符合可视化的追求。

如何阅读本书

 读者现在正在阅读的，是《精通D3.js》的第2版，本书新增了D3 4.x的内容。

 D3在网络上存在两个常用版本：3.x和4.x。

 3.x经过长时间的发展，资料丰富，拥有大量的出版物，版本比较稳定，插件也较多。

 4.x是新版本，采用了与3.x完全不同的模块化设计思维，功能也比3.x强大，但是目前资料相对较少，几乎没有出版物，社区解答的规模还没有形成。

 本书希望既能结合3.x和4.x的内容，又不至于造成版本使用的混乱。

 第1章至第3章：学习D3的预备知识。

 第4章：D3的核心知识数据绑定，内容通用于3.x和4.x版本。

 第5章至第13章：D3学习的主线，以3.x为基准，其内容也可作为4.x的参考。

 第14章至第16章：D3 4.x的内容，包括升级方法、设计思想、新功能等。

 根据读者的需求，笔者推荐您参考如下的阅读顺序。

1．零基础初学者

 按顺序从第1章阅读到第16章即可，有不需要学习的章节可以自行跳过。

2．已经用过3.x，希望学习4.x的读者

 阅读第4章、第14～16章的内容。第4章属于核心知识，可以用作复习，如果熟悉也可以不阅读。

3．仅希望用3.x的读者

 阅读第4章至第13章。

运行环境

 运行本书的示例，需要安装以下软件：

· Chrome、Firefox、Safari、Opera、Internet Explorer 9及更高版本；

· Apache HTTP Server或Ngnix等服务器软件（部分示例）。

排版约定

 为使读者把握重点，本书将采用以下排版约定。

（1）正文中重要的词汇会使用加粗字体以示强调。

（2）重要的代码会以加粗字体表示强调，例如：

d3.selectAll("p").text("cat"); //普通代码

d3.selectAll("p").text("dog"); //重要代码

勘误信息

 一本书要想完善，需要众多读者反馈错误。笔者虽想尽最大努力确保没有错误，但这却是很困难的。如果你发现书中的任何错误，小到错别字，大到代码无法运行等，希望能及时反馈给笔者。您的任何一次勘误，都会令笔者和其他读者受益。

 与本书相关的最新动态请访问以下网站：

http://www.decembercafe.org/

 勘误信息请发送邮件至：

phantomtyry@126.com

致谢

 这是本书的第2版，在第1版的基础上修改和新增了很多内容。

 感谢支持和购买本书第1版的读者，没有你们的帮助，本书不会有第2版。

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

 感谢我的儿子，他是我最重要的精神支柱。

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

读者服务

 轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。

?下载资源：本书如提供示例代码及资源文件，均可在 下载资源 处下载。

?提交勘误：您对书中内容的修改意见可在 提交勘误 处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。

?交流互动：在页面下方 读者评论 处留下您的疑问或观点，与我们和其他读者一同学习交流。

 页面入口：http://www.broadview.com.cn/31505

　　吕之华，2012年软件工程专业毕业，同年赴日。2015年获日本岩手大学设计与媒体专业硕士学位。多年专研数据可视化、计算机动画等技术。

　　2014年起以D3.js为主题在网络上发表了一系列文章，获得读者好评，本书是在此基础上经过精选和扩充形成的。2017年本书第2版出版。

目 录
第1章 D3简介 1
1．1 D3是什么 1
1．1．1 D3简史 2
1．1．2 D3的优势 3
1．1．3 D3的适用范围 4
1．2 数据可视化是什么 4
1．2．1 目的 5
1．2．2 构成要素 5
1．2．3 相关概念 7
1．3 图表种类 7
1．4 学习方法 10
1．4．1 预备知识 11
1．4．2 学习顺序 11
1．4．3 D3难吗 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选择器 17
2．3 JavaScript 18
2．3．1 在HTML中使用JavaScript 18
2．3．2 语法 19
2．3．3 变量 20
2．3．4 数据类型 21
2．3．5 操作符 23
2．3．6 语句 24
2．3．7 函数 27
2．3．8 对象 27
2．3．9 数组 28
2．4 DOM 29
2．4．1 结构 29
2．4．2 访问和修改HTML元素 30
2．4．3 添加和删除节点 31
2．4．4 事件 32
2．5 SVG 32
2．5．1 位图和矢量图 33
2．5．2 图形元素 33
2．5．3 文字 38
2．5．4 样式 39
2．5．5 标记 40
2．5．6 滤镜 41
2．5．7 渐变 42
2．6 Canvas 43
2．6．1 开始绘图 44
2．6．2 状态机 44
2．6．3 基本图形 45
2．6．4 文字 47
2．6．5 变形 48
2．6．6 图片 49
2．6．7 渐变 49
2．7 色彩基础 50
2．7．1 颜色空间 50
2．7．2 色相环 51
2．7．3 配色基础 52
2．7．4 配色的心理效果 54
第3章 准备开发环境 55
3．1 下载D3 55
3．1．1 通过本地引用 55
3．1．2 通过网络引用 56
3．2 安装Chrome和Sublime Text 56
3．3 安装Apache HTTP Server 57
3．4 Hello World 60
3．5 绘制矢量图 61
3．6 调试 62
第4章 D3基础：选择集与数据 63
4．1 选择元素 63
4．2 选择集 64
4．2．1 查看状态 64
4．2．2 设定和获取属性 65
4．3 添加、插入和删除 68
4．4 数据绑定 69
4．4．1 datum()的工作过程 69
4．4．2 data()的工作过程 72
4．4．3 绑定的顺序 76
4．5 update、enter、exit 77
4．5．1 enter的处理方法 77
4．5．2 exit的处理方法 79
4．5．3 数据更新时的处理模板 79
4．6 选择集的常用方法 80
4．6．1 过滤filter 80
4．6．2 排序sort 81
4．6．3 遍历each 81
4．6．4 传递call 82
4．7 数组的常用方法 82
4．7．1 排序 82
4．7．2 求值 83
4．7．3 生成和操作 85
4．7．4 映射 86
4．8 柱形图 88
4．8．1 添加矩形和文字 88
4．8．2 更新数据 92
第5章 比例尺和坐标轴 96
5．1 定量比例尺 96
5．1．1 线性比例尺 97
5．1．2 指数比例尺和对数比例尺 100
5．1．3 量子比例尺和分位比例尺 101
5．1．4 阈值比例尺 103
5．2 序数比例尺 104
5．3 坐标轴 108
5．3．1 绘制方法 109
5．3．2 刻度 111
5．3．3 各比例尺的坐标轴 113
5．4 散点图 113
第6章 绘制 116
6．1 颜色 116
6．1．1 RGB 117
6．1．2 HSL 118
6．1．3 插值 119
6．2 线段生成器 119
6．3 区域生成器 123
6．4 弧生成器 125
6．5 符号生成器 127
6．6 弦生成器 129
6．7 对角线生成器 131
6．8 折线图 132
第7章 动画 137
7．1 过渡效果 137
7．1．1 创建过渡 138
7．1．2 过渡的属性 141
7．1．3 子元素 144
7．1．4 事件监听和调用 146
7．1．5 过渡的样式 148
7．2 散点图的过渡效果 148
7．2．1 绘图准备 149
7．2．2 应用过渡的散点 150
7．2．3 绘制坐标轴 151
7．2．4 更新数据的事件 152
7．2．5 结果 153
第8章 交互 154
8．1 监听器 154
8．1．1 鼠标 156
8．1．2 键盘 157
8．1．3 触屏 159
8．2 事件d3．event 161
8．2．1 事件的种类 161
8．2．2 容器的相对坐标 162
8．3 行为d3．behavior 163
8．3．1 拖曳 163
8．3．2 缩放 166
第9章 导入和导出 170
9．1 文件导入 170
9．1．1 JSON 171
9．1．2 CSV 173
9．1．3 XML 177
9．1．4 TEXT 178
9．2 文件导出 179
9．2．1 导出为SVG文件 179
9．2．2 编辑矢量图 182
第10章 布局 185
10．1 饼状图 185
10．2 力导向图 191
10．3 弦图 197
10．4 树图 205
10．5 捆图 210
10．6 直方图 216
10．7 矩阵树图 223

第11章 地图的基础 228
11．1 地图的数据 228
11．1．1 下载 228
11．1．2 简化 232
11．1．3 GeoJSON 233
11．1．4 TopoJSON 237
11．2 中国地图 239
11．2．1 基于GeoJSON 239
11．2．2 基于TopoJSON 242
11．3 地理路径 250
11．3．1 地理路径生成器 250
11．3．2 形状生成器 254
11．4 投影 259
第12章 友好的交互 268
12．1 提示框 268
12．1．1 饼状图的提示框 269
12．1．2 提示框的样式 271
12．2 坐标系中的焦点 273
12．2．1 折线图的焦点 274
12．2．2 为折线图添加提示框 279
12．3 元素组合 283
12．3．1 饼状图的拖曳 284
12．3．2 移入和移出 286
12．3．3 合并 294
12．4 区域选择 296
12．4．1 在SVG画板里选择一块区域 297
12．4．2 散点图的区域选择 299
12．5 开关 301
12．5．1 思维导图的构造思路 302
12．5．2 思维导图的制作 305
第13章 地图的应用 312
13．1 值域的颜色 312
13．2 标注 316
13．2．1 标注地点 317
13．2．2 夜光图 319
13．3 标线 321
13．3．1 带有箭头的标线 322
13．3．2 球面地图的标线 324
13．4 拖曳和缩放 326
13．4．1 平面地图 326
13．4．2 球面地图 329
13．5 力导向地图 330
13．5．1 Voronoi图和Delaunay三角剖分 330
13．5．2 力导向的中国地图 334
第14章 D3 4．x简介 340
14．1 4．x的新功能 341
14．2 3．x如何升级到4．x 344
14．2．1 加载文件的变化 345
14．2．2 布局的变化规则 345
14．2．3 生成器的变化规则 346
14．2．4 比例尺的变化规则 346
14．2．5 升级小结 347
14．3 D3 4．x的设计思想 347
14．3．1 3．x和4．x的结构区别 347
14．3．2 模块化的优点 348
14．3．3 可阅读性和自我解释 350
14．4 未来展望 351
14．4．1 模块发展的百花齐放 352
14．4．2 应用范围扩大 352
14．4．3 第二核心、第三核心 352
第15章 D3 4．x新功能剖析 354
15．1 全新的力导向图 354
15．1．1 力的作用 355
15．1．2 控制时间 357
15．1．3 给Canvas添加拖放事件 358
15．1．4 4．x版完整的力导向图 360
15．2 丰富多彩的调色板 364
15．2．1 配色模板 365
15．2．2 d3-color 367
15．3 功能倍增的图形生成器 368
15．3．1 折线图和线段生成器 369
15．3．2 消失的对角线生成器 372
15．3．3 更简单的坐标轴 374
15．4 更合理的布局 375
15．4．1 堆栈图的数据结构 376
15．4．2 从思维导图来探究d3-hierarchy 380
15．4．3 全新的打包图d3．pack 383
15．5 无限循环的过渡效果 384
15．5．1 单元素的无限过渡 385
15．5．2 多元素的无限过渡 386
第16章 D3 4．x在地图上的应用 387
16．1 Canvas地图的基本功能 387
16．1．1 填充和描边 388
16．1．2 选择区域 390
16．1．3 拖曳和缩放 392
16．2 地图上飞舞的流星 394
16．2．1 Canvas的流星效果 395
16．2．2 地图两点间的流星 396
16．3 地球仪 401
16．3．1 4．x的形状生成器 401
16．3．2 Canvas球面地图的旋转和缩放 403
16．4 结合Leaflet．js和D3．js 407
16．4．1 Leaflet．js的简介和安装 408
16．4．2 载入地图 408
16．4．3 加入标注 412
16．4．4 添加SVG或Canvas到地图上 414
附录A 彩色插图 419
参考文献 436