第 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 DOM29
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.1 下载 D3 55
第 3章准备开发环境 55
3.1 下载D3 55
3.1.1通过本地引用 55
3.1.2通过网络引用 56
3.2 安装 Chrome和 Sublime Text 56
3.3 安装 Apache HTTP Server57
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 JSON171
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-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-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
· · · · · · (
收起)
