前言



Chpater 01? D3簡介

1.1 ?D3是什麼

1.2 ?資料視覺化是什麼

1.3 ?圖表種類

1.4 ?學習方法



Chpater 02? Web前端開發基礎

2.1 ?瀏覽器和伺服器

2.2 ?HTML&CSS

2.3 ?JavaScript

2.4 ?DOM

2.5 ?SVG

2.6 ?Canvas

2.7 ?色彩基礎



Chpater 03? 準備開發環境

3.1 ?下載D3

3.2 ?安裝Chrome和Sublime Text

3.3 ?安裝Apache HTTP Server

3.4 ?Hello World

3.5 ?繪製向量圖

3.6 ?偵錯



Chpater 04? D3基礎：選擇集與資料

4.1 ?選擇元素

4.2 ?選擇集

4.3 ?增加、插入和刪除

4.4 ?資料綁定

4.5 ?update、enter、exit

4.6 ?選擇集的常用方法

4.7 ?陣列的常用方法

4.8 ?直條圖



Chpater 05? 比例尺和座標軸

5.1 ?定量比例尺

5.2 ?序數比例尺

5.3 ?座標軸

5.4 ?散點圖



Chpater 06? 繪製

6.1 ?顏色

6.2 ?線段產生器

6.3 ?區域產生器

6.4 ?弧產生器

6.5 ?符號產生器

6.6 ?弦產生器

6.7 ?對角線產生器

6.8 ?聚合線圖



Chpater 07? 動畫

7.1 ?過渡效果

7.2 ?散點圖的過渡效果



Chpater 08? 互動

8.1 ?監聽器

8.2 ?事件d3.event

8.3 ?行為d3.behavior



Chpater 09? 匯入和匯出

9.1 ?檔案匯入

9.2 ?檔案匯出



Chpater 10? 版面配置

10.1 ?圓形圖

10.2 ?力導向圖

10.3 ?弦圖

10.4 ?樹狀圖

10.5 ?捆圖

10.6 ?長條圖

10.7 ?矩陣樹狀圖



Chpater 11? 地圖的基礎

11.1 ?地圖的資料

11.2 ?中國地圖

11.3 ?地理路徑

11.4 ?投影



Chpater 12? 人性化的互動

12.1 ?提示框

12.2 ?座標系中的焦點

12.3 ?元素組合

12.4 ?區域選擇

12.5 ?開關



Chpater 13? 地圖的應用

13.1 ?值域的顏色

13.2 ?標記

13.3 ?標線

13.4 ?滑動和縮放

13.5 ?力導向地圖



Chpater 14? D3 4.x簡介

14.1 ?4.x的新功能

14.2 ?3.x如何升級到4.x

14.3 ?D3 4.x的設計思想

14.4 ?未來展望



Chpater 15? D3 4.x新功能剖析

15.1 ?全新的力導向圖

15.2 ?豐富多彩的色票面板

15.3 ?功能倍增的圖形產生器

15.4 ?更合理的版面配置

15.5 ?無限循環的過渡效果



Chpater 16? D3 4.x在地圖上的應用

16.1 ?Canvas 地圖的基本功能

16.2 ?地圖上飛舞的流星

16.3 ?地球儀

16.4 ?結合Leaflet.js和D3.js

參考文獻

前言



　　D3（Data-Driven Documents）是一個用於資料視覺化開發的JavaScript函數庫，專案託管於GitHub。GitHub是全世界最流行的程式託管平台，雲集了來自世界各地的優秀工程師。D3自誕生以來，不斷受到好評，其排名在GitHub的專案倉庫排行榜已高居第2位（2017年3月）。以一個視覺化工具而言，能取得這種成就可說是奇蹟。



　　人數多並不表示一個工具好，但一定表示它擁有更多的教學、範例程式、社區問答和出版物。D3由於其龐大的使用者量，已經幾乎成為資料視覺化的代名詞。



　　本書希望盡可能讓零基礎初學者也能閱讀，但或許很難。您也許需要至少掌握一種程式語言，例如C/C++、Java、JavaScript，了解網頁撰寫的基礎。



　　學習本書後，相信讀者能在一邊查詢API的情況下完成資料視覺化的工作。為使閱讀儘量簡單、容易，本書附帶非常豐富的插圖。

用圖而不用文字。這也正好符合視覺化的追求。



　　?執行環境



　　執行本書的範例，需要安裝以下軟體：

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

　　Apache HTTP Server或Ngnix等伺服器軟體（部分範例）。



　　?排版約定



　　為讓讀者把握重點，本書將採用以下排版約定。

　　（1）正文中重要的詞彙會使用粗體字型以示強調。

　　（2）重要的程式會以粗體字型表示強調，例如：

　　d3.selectAll("p").text("cat"); //普通程式

　　d3.selectAll("p").text("dog"); //重要程式



　　?勘誤資訊



　　一本書要想增強，需要許多讀者回饋錯誤。筆者雖想盡最大努力確保沒有錯誤，但卻是困難的。如果發現書中的任何錯誤，小到錯別字，大到程式無法執行等，希望能及時回饋。您的任何一次勘誤，都會令筆者和其他讀者受益。



　　與本書相關的最新動態請造訪以下網站：www.decembercafe.org/

　　勘誤資訊請發送郵件至：phantomtyry@126.com



　　?致謝



　　感謝我的妻子，當我感到疲勞時，有她在身邊總能感到安心。

　　感謝我的兒子，他是我最重要的精神支柱。

　　感謝本書的編輯付睿女士，她協助我完成本書的構思，並提出了很多建設性的意見。

?