第 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
· · · · · · (
收起)
