跳至內容

D3.js

本頁使用了標題或全文手工轉換
維基百科，自由的百科全書
D3.js
開發者Mike Bostock、Jeffrey Heer、Vadim Ogievetsky與社群
首次釋出2011年2月18日，​13年前​（2011-02-18）
目前版本
  • 7.9.0（2024年3月12日；穩定版本）[1]
編輯維基數據連結
原始碼庫
編輯維基數據連結
程式語言JavaScript
類型數據視覺化、JavaScript函式庫
特許條款BSD特許條款
網站d3js.org

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版[2]。

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

歷史

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

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

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

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

技術原理

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

物件選擇

D3.js所使用的物件選擇方式是透過使用CSS樣式選擇器來選擇一個或多個或一組文件物件模型物件，然後透過類似jQuery的方式控制所選的物件[7]。例如，選擇所有的<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物件[8][9][10]。 

// 資料
  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也改善了地理座標的轉換系統[11]，因此能準確地呈現包含地理資訊的圖表，例如「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的資料[6]： 

		//需先引入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流程[12]。接在.enter()函數後方的指令會作用在所有資料上並設置到前一段指令selectAll()選擇的網頁元素中所有未就緒的網頁元素。[13]

其他特色

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

相關程式庫

Three.js

參見：Three.js

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

參考文獻

  1. ^ Release 7.9.0. 2024年3月12日 [2024年3月22日]. 
  2. ^ 參照錯誤：沒有為名為d3 Releases的參考文獻提供內容
  3. ^ Websites using D3. Wappalyzer. [2018-09-11]. （原始內容存檔於2018-09-11）. 
  4. ^ Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey, ReVision: Automated Classification, Analysisand Redesign of Chart Images, ACM User Interface Software & Technology, 2011 [2013-01-23], （原始內容存檔於2018-04-04） 
  5. ^ 5.0 5.1 Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey, D3: Data-Driven Documents, 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. ^ 6.0 6.1 Streaming Shapefile Parser. [2018-09-12]. （原始內容存檔於2018-08-15）. 
  7. ^ Bostock, Ogievetsky & Heer 2011[5], chap. 3
  8. ^ Bostock, Mike, Thinking with Joins, 2012-02-05 [2018-09-12], （原始內容存檔於2014-05-28） 
  9. ^ A Pen by Lopez Hugo. Codepen.io. [2016-08-01]. （原始內容存檔於2016-03-22）. 
  10. ^ Edit fiddle. JSFiddle.net. [2016-08-01]. （原始內容存檔於2016-12-28）. 
  11. ^ 李建興. D3.js 5.0釋出，支援非同步樣版、導入專業資料配色法. ithome.com. 2018-04-18 [2018-09-16]. （原始內容存檔於2018-09-16）. 
  12. ^ SVG D3.js - Enter、Update 和 Exit. oxxostudio.tw. 2015-09-17 [2018-10-06]. （原始內容存檔於2018-10-06）. 
  13. ^ Three Little Circles. Mbostock.github.io. [2016-08-01]. （原始內容存檔於2016-07-19）. 
  14. ^ 何宗諭. 初探D3.js ─ 資料視覺化的利器. 計算機及資訊網絡中心電子報 (臺灣大學). 2017-03-20, 第0040期 [2018-09-16]. ISSN 2077-8813. （原始內容存檔於2018-02-02）. 
  15. ^ sghall. D3Three.js. github.com. [2018-09-13]. （原始內容存檔於2018-06-11）. 

延伸閱讀

D3.js入門相關文章
D3.js進階相關文章
其他D3.js相關文章
影片資源

外部連結

維基共享資源上的相關多媒體資源：D3.js
取自 "https://zh.wikipedia.org/w/index.php?title=D3.js&oldid=80526989"