目 录

第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&CSS16

2.2.1 HTML元素17

2.2.2 CSS选择器17

2.3 JavaScript18

2.3.1 在HTML中使用JavaScript18

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 DOM29

2.4.1 结构29

2.4.2 访问和修改HTML元素30

2.4.3 添加和删除节点31

2.4.4 事件32

2.5 SVG32

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 Canvas43

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 下载D355

3.1.1 通过本地引用55

3.1.2 通过网络引用56

3.2 安装Chrome和Sublime Text56

3.3 安装Apache HTTP Server57

3.4 Hello World60

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、exit77

4.5.1 enter的处理方法77

4.5.2 exit的处理方法79

4.5.3 数据更新时的处理模板79

4.6 选择集的常用方法80

4.6.1 过滤filter80

4.6.2 排序sort81

4.6.3 遍历each81

4.6.4 传递call82

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 RGB117

6.1.2 HSL118

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.event161

8.2.1 事件的种类161

8.2.2 容器的相对坐标162

8.3 行为d3.behavior163

8.3.1 拖曳163

8.3.2 缩放166

第9章 导入和导出170

9.1 文件导入170

9.1.1 JSON171

9.1.2 CSV173

9.1.3 XML177

9.1.4 TEXT178

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 GeoJSON233

11.1.4 TopoJSON237

11.2 中国地图239

11.2.1 基于GeoJSON239

11.2.2 基于TopoJSON242

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.x344

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-color367

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-hierarchy380

15.4.3 全新的打包图d3.pack383

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.js407

16.4.1 Leaflet.js的简介和安装408

16.4.2 载入地图408

16.4.3 加入标注412

16.4.4 添加SVG或Canvas到地图上414

附录A 彩色插图419

参考文献436