**D3.js**（**D3**或**Data-Driven Documents**）是一个使用动态图形進行資料視覺化的JavaScript程式庫。與W3C标准相容，并且利用广泛实现的SVG、JavaScript和CSS标准，改良自早期的Protovis程式庫。与其他的程式庫相比，D3对视图结果有很大的可控性。D3是2011年面世的，同年的8月发布了2.0.0版。到2021年9月，D3已被更新到了7.0.3版。

D3.js已被數十萬個網站使用，最常被運用在線上新聞網站呈現交互式圖形、呈現數據資料的圖表和呈現含有地理資訊的資料。另外SVG的輸出功能也使得D3.js能用於印刷出版物的繪製上。

歷史
--

在D3.js開發之前已經有出現過許多嘗試做資料視覺化的套件，例如Prefuse（英语：），Flare和Protovis程式庫，他們都可以視為D3.js的前身。然而Prefuse和Flare皆有缺點，皆不能只透過瀏覽器完成渲染，皆須要透過額外插件來完成。

例如2005年釋出的Prefuse是一個資料視覺化程式庫，但是它需要透過網頁的Java插件才能於瀏覽器中呈現；而Flare是2007年釋出的另一個資料視覺化工具包，由於其是使用ActionScript程式語言開發，因此也需要額外插件，即Flash插件才能完成渲染。

2009年，史丹佛大學的史丹佛視覺化團隊（Stanford Visualization Group）的傑佛瑞·赫爾、邁克·保斯托（英语：）和瓦迪姆·歐格菲茲齊利用開發Prefuse和Flare的經驗開始用Javscript開發了可從給定資料產生SVG圖形的Protovis程式庫。而Protovis程式庫在業界和學界皆有一定的知名度。

2011年，史丹佛視覺化團隊停止開發Protovis，並開始開發新的資料視覺化程式庫，藉由之前開發Protovis的經驗，開發出了D3.js程式庫，在注重於Web標準的同時提供了更豐富的平台也有了更好的效能。

技術原理
----

D3.js透過預先建立好遷入於網頁中的JavaScript函數來選擇網頁元素、建立SVG元素、調整CSS來呈現資料，並且也可以設定動畫、動態改變物件狀態或加入工具提示來完成使用者互動功能。使用簡單的D3.js函數就能夠將大型的數據資料結構與SVG物件進行綁定，並且能生成格式化文本和各種圖表。其數據資料結構的格式可以是JSON、CSV（以逗號分隔的資料）或GeoJSON，也可以透過自己寫JavaScript函數來讀取其他或自定義格式的資料，例如Shapefile。

### 物件選擇

D3.js所使用的物件選擇方式是透過使用CSS樣式選擇器來選擇一個或多個或一組文档对象模型物件，然後透過類似jQuery的方式控制所選的物件。例如，選擇所有的`<p>...</p>`網頁元素，將之改成方形類別、移動位置、並更換顏色為淡紫色在D3.js中只要使用簡單的程式碼即可完成：

```
 d3.selectAll("p") // 選擇所有 <p> 網頁元素
 .style("color", "lavender") // 將顏色 "color" 樣式改成 "lavender" 淡紫色 (薰衣草色)
 .attr("class", "squares") // 將 "class" 改成 "squares"
 .attr("x", 50); // 將屬性值 "x" (水平位置) 改為 50px

```

### 動態改變物件狀態

透過D3.js定義的物件成員函數`function transition (name)`則可以在一定時間內平滑地改變物件的屬性或樣式的值，例如可以在500毫秒內逐漸將所有的`<p>...</p>`網頁元素漸變為粉紅色：

```
 d3.selectAll("p") // 選擇所有 <p> 網頁元素
 .transition("trans\_1") // 定義一個transition，命名為"trans\_1"
 .delay(0) // 觸發後延遲0毫秒後開始動畫
 .duration(500) // 漸變時間500毫秒
 .ease(d3.easeLinear) // 使用線性漸變，並且....
 .style("color", "pink"); // ...並且最終變為粉紅色

```

### 資料綁定

左邊的程式碼渲染的結果
D3.js有提供一進階應用例如設定與物件相關聯，或者將載入的資料直接繪成物件。在D3.js中，可以將資料與物件綁定，如此一來，當資料讀入之後根據資料產生對應具有相關的屬性（形狀、顏色或數值等）和行為（動畫或事件等）的SVG物件。

```
// 資料
 var countriesData = [
 { name:"Ireland", income:53000, life: 78, pop:6378, color: "black"},
 { name:"Norway", income:73000, life: 87, pop:5084, color: "blue" },
 { name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
 ];
// 建立svg網頁物件
 var svg = d3.select("#hook").append("svg")
 .attr("width", 120)
 .attr("height", 120)
 .style("background-color", "#D0D0D0");
// 從資料建立關聯的svg網頁元素
 svg.selectAll("circle") // 建立還不存在的圓形樣板
 .data(countriesData) // 綁定資料
 .enter() // 對每個資料......
 .append("circle") // 綁定資料列中的......資料到圓形
 .attr("id", function(d) { return d.name }) // 圓形的id為國家名
 .attr("cx", function(d) { return d.income / 1000 }) // 圓形的x坐標位置為收入
 .attr("cy", function(d) { return d.life }) // 圓形的y坐標位置為預期收入
 .attr("r", function(d) { return d.pop / 1000 \*2 }) // 圓形的半徑為國家人口數
 .attr("fill", function(d) { return d.color }); // 給表示不同國家的圓形不同顏色

```

### 資料讀取

左邊的程式碼渲染結果示意圖。直接將地理資訊透過D3.js轉為SVG而未進行設定時，將會顯示為未設定顏色（預設黑色）的地圖。透過上述其他方法亦可完成各類互動式圖表等相關應用。
D3.js除了有提供將載入的資料直接繪成物件的功能之外，也支援從檔案讀取資料並直接生成SVG圖像。此應用使得D3.js可以用簡單的程式碼完成與地理資訊相關的資料視覺化，而新版本的D3.js也改善了地理座標的轉換系統，因此能準確地呈現包含地理資訊的圖表，例如「japan.json」中存了日本的GeoJSON地理資訊，則D3.js可以直接並載入並顯示日本地圖：

```
d3.json("japan.json", function(topodata) {//載入JSON檔案
 var features = topojson.feature(//從GeoJSON中取出日本地形
 topodata, 
 topodata.objects["japan"]
 ).features;
 var path = d3.geo.path().projection( 
 d3.geo.mercator()
 .center([138,37]) //指定為日本經緯度位置
 .scale(6000) //放大至符合圖形大小
 );
 d3.select("svg")
 .selectAll("path") // 建立還不存在的路徑物件樣板
 .data(features) // 綁定日本地形資料
 .enter() // 對所有的物件.....
 .append("path") // 插入路徑物件
 .attr("d",path); // 路徑物件的路徑依照日本經緯度位置填入地形資料
});

```

然而許多政府機關提供的文件皆為Shapefile，而由於D3.js也可以透過自己寫JavaScript函式或引用他第三方程式庫來讀取其他例如Shapefile的資料：

```
 //需先引入Shapefile庫
shapefile.open("japan.shp") //載入日本的Shapefile檔案
 .then(source => source.read()
 .then(function log(result) { //若Shapefile載入完畢
 if (result.done) return;
 console.log(result.value); //印出載入到的地理資訊
 //下同
 }))
 .catch(error => console.error(error.stack));

```

### 根據資料產生節點

當檔案順利讀入並與D3.js物件綁定之後，一般D3.js在使用上基本上會明確地用.enter()函數、暗示更新的函數以及.exit()函數來調用資料集中範圍內的資料，其中，d3.js沒有「update()」函數，需要自行時做對應功能來完成enter、update以及exit流程。接在.enter()函數後方的指令會作用在所有資料上並設定到前一段指令selectAll()選擇的網頁元素中所有未就緒的網頁元素。

### 其他特色

除了D3.js之外亦有許多可以抓取並處理資料的程式庫，例如jQuery，但D3.js與jQuery不同於，D3.js使用了數據驅動化來更有效地處理資料，例如，原先使用迴圈來處理資料，並且要預先把網頁元素產生出來，而D3.js則可以使用select或selectAll來批次完成資料處理，並會會視情況自動生成所需的網頁元素，而使得網頁有更多的彈性，也能支援能動態地即時地作出反應的互動性功能。

相關程式庫
-----

### Three.js

参见：Three.js
D3.js可以與Three.js結合，透過結合了D3.js的資料視覺化、圖表產生與Three.js的WebGL特性可以實現三維資料視覺化、圖表的呈現。

參考文獻
----

1. ↑ . 2023年6月3日  [2023年6月30日].
2. ↑
3. ↑ . Wappalyzer.  [2018-09-11]. （原始内容存档于2018-09-11）.
4. ↑  Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey, ACM User Interface Software & Technology, 2011  [2013-01-23], （原始内容存档于2018-04-04）
5. 1 2  Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey, IEEE Transactions on Visualization and Computer Graphics (IEEE Press), October 2011, **17** (12): 2301–2309  [2018-09-11], PMID 22034350, doi:10.1109/TVCG.2011.185, （原始内容存档于2018-09-05）
6. 1 2 .  [2018-09-12]. （原始内容存档于2018-08-15）.
7. ↑  Bostock, Ogievetsky & Heer 2011, chap. 3
8. ↑  Bostock, Mike, 2012-02-05  [2018-09-12], （原始内容存档于2014-05-28）
9. ↑ . Codepen.io.  [2016-08-01]. （原始内容存档于2016-03-22）.
10. ↑ . JSFiddle.net.  [2016-08-01]. （原始内容存档于2016-12-28）.
11. ↑  李建興.. ithome.com. 2018-04-18  [2018-09-16]. （原始内容存档于2018-09-16）.
12. ↑ . oxxostudio.tw. 2015-09-17  [2018-10-06]. （原始内容存档于2018-10-06）.
13. ↑ . Mbostock.github.io.  [2016-08-01]. （原始内容存档于2016-07-19）.
14. ↑  何宗諭.. 計算機及資訊網路中心電子報 (臺灣大學). 2017-03-20, **第0040期**  [2018-09-16]. ISSN 2077-8813. （原始内容存档于2018-02-02）.
15. ↑  sghall.. github.com.  [2018-09-13]. （原始内容存档于2018-06-11）.

延伸閱讀
----

D3.js入門相關文章
* Murray, Scott,  1st, Sebastopol, California: O’Reilly Media, March 2013  [2018-09-12], ISBN 978-1-4493-3973-9, （原始内容存档于2018-09-15）
* Timms, Simon,  1st, Birmingham: Packt Publishing, September 2013  [2018-09-12], ISBN 978-1-7821-6654-2, （原始内容存档于2014-08-02）

D3.js進階相關文章
* Dewar, Mike, Steele, Julie; Blanchette, Meghan , 编, Creating Data-Driven Documents 1st, Sebastopol, California: O’Reilly Media, June 2012, ISBN 978-1-4493-2879-5
* Qi Zhu, Nick,  1st, Birmingham: Packt Publishing, October 2013  [2018-09-12], ISBN 978-1-7821-6216-2, （原始内容存档于2014-07-24）

其他D3.js相關文章
* Newton, Thomas; Villarreal, Oscar, Birmingham: Packt Publishing: 126, 2014  [2018-09-12], ISBN 9781783985609, （原始内容存档于2018-09-13）
* Navarro Castillo, Pablo, Birmingham: Packt Publishing: 352, 2014  [2018-09-12], ISBN 9781783286270, （原始内容存档于2018-09-13）
* Teller, Swizec, Birmingham: Packt Publishing: 194, 2013  [2018-09-12], ISBN 9781782160007, （原始内容存档于2018-09-13）
* Viau, Christophe, Bleeding Edge Press: 268, 2013  [2018-09-12], ISBN 9781939902023, （原始内容存档于2014-09-03）
* Meeks, Elijah, Manning Publications: 325, 2014  [2018-09-12], ISBN 9781617292118, （原始内容存档于2019-09-24）
* Maclean, Malcolm, Leanpub: 580, 2014  [2018-09-12], （原始内容存档于2018-09-13）
* King, Ritchie, Addison-Wesley Data & Analytics Series: 288, 2014  [2018-09-12], （原始内容存档于2018-09-13）

影片資源
* Gopal, Nikhil, Sebastopol, California: O’Reilly Media, October 2014  [2018-09-12], （原始内容存档于2018-09-13）
* King, Ritchie, Addison-Wesley Professional, December 2014  [2018-09-12], （原始内容存档于2018-09-13）

外部連結
----

|  |  |
| --- | --- |
|  | 维基共享资源中相关的多媒体资源：**D3.js** |

* 自由软件主题
* icon软件主题
* 信息技术主题

* 官方网站
* D3.js Gallery（页面存档备份，存于）
* Blocksplorer（页面存档备份，存于）, search for blocks by methods used

|  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 

| * 
* 论
* 编
科学、技术、的 |
| --- |
|  |
| 领域划分 | 
* 生物学数据可视化（英语：）
* 化学成像（英语：）
* 罪行绘图
* 数据可视化
* 教育可视化
* 流动可视化（英语：）
* 地理視覺化
* 信息可视化
* 数学可视化（英语：）
* 醫學影像
* 分子图形学（英语：）
* 产品可视化
* 科学可视化
* 软件可视化（英语：）
* 工程製图
* 设计
* 视觉文化（英语：）
* 立体渲染

 |
|  |
| 图像类型 | 
* 统计图表
* 图解
* 工程图
* 函数图形
* 形意文字
* 地图
* 相片
* 象形文字
* Plot（英语：）
* 示意图
* 统计图形
* 表格
* 工程製图
* 施工圖
* 技术插图（英语：）
* 
* 图

 |
|  |
| 相关人士 | 
* 雅克·贝尔汀（英语：）
* 辛西娅·布鲁尔（英语：）
* 斯图加特·卡德（英语：）
* 托马斯·德凡提（英语：）
* 博尔登·丹特（英语：）
* 迈克尔·路易斯·弗兰德利
* 乔治·弗纳斯（英语：）
* 帕特里克·汉拉恩
* 奈杰尔·福尔摩斯（英语：）
* 克里斯托弗·约翰逊（英语：）
* 戈登·金德尔曼（英语：）
* 奥古斯特·凯库勒
* 曼努埃尔·利马（英语：）
* 阿伦·马西阿克伦（英语：）
* 乔克·D·麦金莱（英语：）
* 迈克尔·马尔茨（英语：）
* 布鲁斯·麦考密克（英语：）
* 米里亚·迈耶（英语：）
* 查爾斯·約瑟夫·米納德
* 鲁道夫·莫德利（英语：）
* 加斯帕尔·蒙日
* 塔玛拉·蒙兹纳（英语：）
* 奧圖·紐拉特
* 弗羅倫斯·南丁格爾
* 汉斯珀特·菲斯特（英语：）
* 柯利弗德·皮寇弗
* 威廉·普莱费尔（英语：）
* 卡尔·威廉·波尔克（英语：）
* 朗伯·阿道夫·雅克·凯特勒
* 乔治·罗伯逊（英语：）
* 亚瑟·H·鲁滨逊（英语：）
* 劳伦斯·罗森布鲁姆（英语：）
* 本·施耐德曼（英语：）
* 弗雷澤·斯托達特
* 爱德华·塔夫特（英语：）
* 费尔南达·维加斯（英语：）
* 阿德·奥卢费科（英语：）
* 霍华德·韦纳（英语：）
* 马丁·瓦滕伯格（英语：）
* 黄邦（英语：）

 |
|  |
| 相关 | 

|  |  |
| --- | --- |
| 可视化软件 | 
* Protégé
* Sirius可视化软件
* VisIt

 |
|  |
| 数值分析软件 | 
* Scilab

 |

 |
|  |
| 相关主题 | 

|  |  |
| --- | --- |
|  | 
* 位图
* 视觉化
* 
* 
* 
* 
* 科學模型
	+ 计算机建模导航模板

 |
|  |
| 人机交互 | 
* 用户界面
	+ 
	+ 所见即所得
	+ 图示
* 虚拟现实

 |
|  |
| 图像式思考辅助工具 | 
* 故事板
* 魚骨圖
* 導引圖
* 記憶樹
* 心智圖
* 流程圖
* 欧拉图

 |

* 地图学（又稱"製图学"）
* 无效的图表（英语：）
* 图形绘制（英语：）
* 平面设计（又稱"图形设计"）
* 成像科学（英语：）
* 信息科学
* 信息图形
* 心像
* 误导性影像（英语：）
* 神经成像
* 专利图（英语：）
* 空间分析
* 可视化分析论
* 视知觉
* 统计学
* 圖像學
* 圖像記譜
 |
|  |
| 
* 參見：主题 科學
* 主题 資訊科技
* 主题 設計
* 主题 攝影
* 分类 圖表
* 分类 圖論
* 分类
* 分类 視覺化程式設計語言
* 模板 計算機科學主要領域

 |

 |