目 录

第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