imported>Taeas：维护清理

2024-01-17T08:00:52Z

维护清理

新页面

{{NoteTA|G1=IT|G2=FL}}
{{Infobox software
| name = Data-Driven Documents (D3.js)
| title =
| logo = Logo_D3.svg
| logo caption =
| logo_size = 100px
| logo_alt =
| screenshot =
| caption =
| screenshot_size =
| screenshot_alt =
| collapsible =
| author =
| developer = Mike Bostock、Jeffrey Heer、Vadim Ogievetsky與社群
| released = {{Start date and age|2011|02|18}}
| programming language = [[JavaScript]]
| operating system =
| platform =
| size =
| language =
| language count = 
| language footnote =
| genre = [[数据可视化]]、[[JavaScript函式庫]]
| license = [[BSD许可证]]
| website = {{URL|https://d3js.org/}}
| standard =
| AsOf =
}}
'''D3.js'''（'''D3'''或'''Data-Driven Documents'''）是一个使用动态图形進行[[資料視覺化]]的[[JavaScript函式庫|JavaScript程式庫]]。與[[W3C]]标准相容，并且利用广泛实现的[[SVG]]、JavaScript和[[CSS]]标准，改良自早期的[[Protovis]]程式庫。与其他的程式庫相比，D3对视图结果有很大的可控性。D3是2011年面世的，同年的8月发布了2.0.0版。到2021年9月，D3已被更新到了7.0.3版<ref name="d3 Releases"/>。

D3.js已被數十萬個網站使用<ref>{{Cite web | url = https://www.wappalyzer.com/technologies/d3 | title = Websites using D3 | publisher = Wappalyzer | accessdate = 2018-09-11 | archive-url = https://web.archive.org/web/20180911225154/https://www.wappalyzer.com/technologies/d3 | archive-date = 2018-09-11 | dead-url = no }}</ref>，最常被運用在線上新聞網站呈現交互式圖形、呈現數據資料的圖表和呈現含有地理資訊的資料。另外SVG的輸出功能也使得D3.js能用於印刷出版物的繪製上。

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

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

2009年，[[史丹佛大學]]的史丹佛視覺化團隊（Stanford Visualization Group）的傑佛瑞·赫爾、{{link-en|邁克·保斯托|Mike_Bostock}}和瓦迪姆·歐格菲茲齊利用開發Prefuse和Flare的經驗開始用Javscript開發了可從給定資料產生SVG圖形的Protovis程式庫。而Protovis程式庫在業界和學界皆有一定的知名度<ref>Academic example: {{citation|last1=Savva|first1=Manolis|last2=Kong|first2=Nicholas|last3=Chhajta|first3=Arti|last4=Li|first4=Feifei|last5=Agrawala|first5=Maneesh|last6=Heer|first6=Jeffrey|title=ReVision: Automated Classification, Analysisand Redesign of Chart Images|journal=ACM User Interface Software & Technology|year=2011|url=http://vis.stanford.edu/papers/revision|accessdate=2013-01-23|archive-url=https://web.archive.org/web/20180404094418/http://vis.stanford.edu/papers/revision|archive-date=2018-04-04|dead-url=yes}}</ref>。

2011年，史丹佛視覺化團隊停止開發Protovis，並開始開發新的資料視覺化程式庫，藉由之前開發Protovis的經驗，開發出了D3.js程式庫，在注重於Web標準的同時提供了更豐富的平台也有了更好的效能<ref name="Bostock, Ogievetsky & Heer 2011">{{citation |first1=Michael |last1=Bostock |first2=Vadim |last2=Ogievetsky |first3=Jeffrey |last3=Heer |title=D3: Data-Driven Documents |journal=IEEE Transactions on Visualization and Computer Graphics |date=October 2011 |publisher=[[IEEE Press]] |url=http://vis.stanford.edu/papers/d3 |volume=17 |issue=12 |pages=2301–2309 |doi=10.1109/TVCG.2011.185 |pmid=22034350 |access-date=2018-09-11 |archive-url=https://web.archive.org/web/20180905192513/http://vis.stanford.edu/papers/d3 |archive-date=2018-09-05 |dead-url=no }}</ref>。

== 技術原理 ==
D3.js透過預先建立好遷入於網頁中的[[JavaScript]]函數來選擇網頁元素、建立[[SVG]]元素、調整[[CSS]]來呈現資料，並且也可以設定動畫、動態改變物件狀態或加入工具提示來完成使用者互動功能。使用簡單的D3.js函數就能夠將大型的數據資料結構與SVG物件進行綁定，並且能生成[[格式化文本]]和各種圖表。其數據資料結構的格式可以是[[JSON]]、[[CSV]]（以[[逗號]]分隔的資料）或[[GeoJSON]]，也可以透過自己寫JavaScript函數來讀取其他或自定義格式的資料，例如[[Shapefile]]<ref name="mbostock Shapefile">{{Cite web | url = https://github.com/mbostock/shapefile | title = Streaming Shapefile Parser | accessdate = 2018-09-12 | archive-url = https://web.archive.org/web/20180815044340/https://github.com/mbostock/shapefile | archive-date = 2018-08-15 | dead-url = no }}</ref>。

=== 物件選擇 ===
D3.js所使用的物件選擇方式是透過使用CSS樣式選擇器來選擇一個或多個或一組文档对象模型物件，然後透過類似[[jQuery]]的方式控制所選的物件{{#tag:ref|{{harvnb|Bostock|Ogievetsky|Heer|2011}}<ref name="Bostock, Ogievetsky & Heer 2011"/>, chap. 3}}。例如，選擇所有的{{tag|p}}網頁元素，將之改成方形類別、移動位置、並更換顏色為[[薰衣草色|淡紫色]]在D3.js中只要使用簡單的程式碼即可完成：
<syntaxhighlight lang="javascript">
d3.selectAll("p") // 選擇所有 <p> 網頁元素
.style("color", "lavender") // 將顏色 "color" 樣式改成 "lavender" 淡紫色 (薰衣草色)
.attr("class", "squares") // 將 "class" 改成 "squares"
.attr("x", 50); // 將屬性值 "x" (水平位置) 改為 50px
</syntaxhighlight>

=== 動態改變物件狀態 ===
透過D3.js定義的物件成員函數<code>function transition (name)</code>則可以在一定時間內平滑地改變物件的屬性或樣式的值，例如可以在500毫秒內逐漸將所有的{{tag|p}}網頁元素漸變為[[粉紅色]]：
<syntaxhighlight lang="javascript">
d3.selectAll("p") // 選擇所有 <p> 網頁元素
.transition("trans_1") // 定義一個transition，命名為"trans_1"
.delay(0) // 觸發後延遲0毫秒後開始動畫
.duration(500) // 漸變時間500毫秒
.ease(d3.easeLinear) // 使用線性漸變，並且....
.style("color", "pink"); // ...並且最終變為粉紅色
</syntaxhighlight>

=== 資料綁定 ===
[[File:D3 Example Data-binding.svg|300px|thumb|左邊的程式碼渲染的結果]]
D3.js有提供一進階應用例如設定與物件相關聯，或者將載入的資料直接繪成物件。在D3.js中，可以將資料與物件綁定，如此一來，當資料讀入之後根據資料產生對應具有相關的屬性（形狀、顏色或數值等）和行為（動畫或事件等）的SVG物件<ref>{{citation|date=2012-02-05|first=Mike|last=Bostock|title=Thinking with Joins|url=http://bost.ocks.org/mike/join/|access-date=2018-09-12|archive-url=https://web.archive.org/web/20140528005657/http://bost.ocks.org/mike/join/|archive-date=2014-05-28|dead-url=yes}}</ref><ref>{{cite web |url=http://codepen.io/hugolpz/pen/wBorvq |title=A Pen by Lopez Hugo |website=Codepen.io |date= |accessdate=2016-08-01 |archive-url=https://web.archive.org/web/20160322021453/http://codepen.io/hugolpz/pen/wBorvq |archive-date=2016-03-22 |dead-url=yes }}</ref><ref>{{cite web|author=|url=http://jsfiddle.net/9sggtr7a/|title=Edit fiddle|website=JSFiddle.net|date=|accessdate=2016-08-01|archive-url=https://web.archive.org/web/20161228073729/http://jsfiddle.net/9sggtr7a/|archive-date=2016-12-28|dead-url=no}}</ref>。
<syntaxhighlight lang="javascript">
// 資料
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 }); // 給表示不同國家的圓形不同顏色
</syntaxhighlight>

=== 資料讀取 ===
[[File:Emojione BW 1F5FE.svg|thumb|300px|左邊的程式碼渲染結果示意圖。直接將地理資訊透過D3.js轉為SVG而未進行設定時，將會顯示為未設定顏色（預設黑色）的地圖。透過上述其他方法亦可完成各類互動式圖表等相關應用。]]
D3.js除了有提供將載入的資料直接繪成物件的功能之外，也支援從檔案讀取資料並直接生成SVG圖像。此應用使得D3.js可以用簡單的程式碼完成與地理資訊相關的資料視覺化，而新版本的D3.js也改善了地理座標的轉換系統<ref>{{Cite web | url = https://www.ithome.com.tw/news/122539 | title = D3.js 5.0釋出，支援非同步樣版、導入專業資料配色法 | author = 李建興 | publisher = ithome.com | date = 2018-04-18 | accessdate = 2018-09-16 | archive-url = https://web.archive.org/web/20180916203823/https://www.ithome.com.tw/news/122539 | archive-date = 2018-09-16 | dead-url = no }}</ref>，因此能準確地呈現包含地理資訊的圖表，例如「japan.json」中存了[[日本]]的[[GeoJSON]]地理資訊，則D3.js可以直接並載入並顯示日本地圖：
<syntaxhighlight lang="javascript">
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); // 路徑物件的路徑依照日本經緯度位置填入地形資料
});
</syntaxhighlight>
然而許多政府機關提供的文件皆為[[Shapefile]]，而由於D3.js也可以透過自己寫JavaScript函式或引用他第三方程式庫來讀取其他例如Shapefile的資料<ref name="mbostock Shapefile"/>：
<syntaxhighlight lang="javascript"> //需先引入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));
</syntaxhighlight>

=== 根據資料產生節點 ===
當檔案順利讀入並與D3.js物件綁定之後，一般D3.js在使用上基本上會明確地用.enter()函數、暗示更新的函數以及.exit()函數來調用資料集中範圍內的資料，其中，d3.js沒有「update()」函數，需要自行時做對應功能來完成enter、update以及exit流程<ref>{{Cite web | title = SVG D3.js - Enter、Update 和 Exit | url = https://www.oxxostudio.tw/articles/201509/svg-d3-18-enter-update-exit.html | date =2015-09-17| accessdate = 2018-10-06 | publisher = oxxostudio.tw | archive-url = https://web.archive.org/web/20181006194728/https://www.oxxostudio.tw/articles/201509/svg-d3-18-enter-update-exit.html | archive-date = 2018-10-06 | dead-url = no }}</ref>。接在.enter()函數後方的指令會作用在所有資料上並設定到前一段指令selectAll()選擇的網頁元素中所有未就緒的網頁元素。<ref>{{cite web |url=https://mbostock.github.io/d3/tutorial/circle.html |title=Three Little Circles |website=Mbostock.github.io |accessdate=2016-08-01 |archive-url=https://web.archive.org/web/20160719020359/http://mbostock.github.io/d3/tutorial/circle.html |archive-date=2016-07-19 |dead-url=no }}</ref>

=== 其他特色 ===
除了D3.js之外亦有許多可以抓取並處理資料的程式庫，例如jQuery，但D3.js與jQuery不同於，D3.js使用了數據驅動化來更有效地處理資料，例如，原先使用迴圈來處理資料，並且要預先把網頁元素產生出來，而D3.js則可以使用select或selectAll來批次完成資料處理，並會會視情況自動生成所需的網頁元素，而使得網頁有更多的彈性，也能支援能動態地即時地作出反應的互動性功能<ref>{{Cite paper |url=http://www.cc.ntu.edu.tw/chinese/epaper/0040/20170320_4004.html |title=初探D3.js ─ 資料視覺化的利器 |author=何宗諭 |publisher=臺灣大學 |journal=計算機及資訊網路中心電子報 |volume=第0040期 |date=2017-03-20 |ISSN=2077-8813 |access-date=2018-09-16 |archive-url=https://web.archive.org/web/20180202152123/http://www.cc.ntu.edu.tw/chinese/epaper/0040/20170320_4004.html |archive-date=2018-02-02 |dead-url=no }}</ref>。

== 相關程式庫 ==
=== Three.js ===
{{see also|Three.js}}
D3.js可以與Three.js結合，透過結合了D3.js的[[数据可视化|資料視覺化]]、圖表產生與Three.js的[[WebGL]]特性可以實現三維資料視覺化、圖表的呈現<ref>{{cite web |url=https://github.com/sghall/d3-threejs |title=D3Three.js |website=github.com |author=sghall |accessdate=2018-09-13 |archive-url=https://web.archive.org/web/20180611014506/https://github.com/sghall/d3-threejs |archive-date=2018-06-11 |dead-url=no }}</ref>。

== 參考文獻 ==
{{Reflist|30em}}

== 延伸閱讀 ==
{{Refbegin|2}}
;D3.js入門相關文章
* {{citation |first1=Scott |last1=Murray |title=Interactive Data Visualization for the Web, An Introduction to Designing with D3 |edition=1st |date=March 2013 |publisher=[[O’Reilly Media]] |place=Sebastopol, California |isbn=978-1-4493-3973-9 |url=http://shop.oreilly.com/product/0636920026938.do |accessdate=2018-09-12 |archive-date=2018-09-15 |archive-url=https://web.archive.org/web/20180915190439/http://shop.oreilly.com/product/0636920026938.do |dead-url=no }}
* {{citation |first1=Simon |last1=Timms |title=Social Data Visualization with HTML5 and JavaScript |edition=1st |date=September 2013 |publisher=[[Packt Publishing]] |place=Birmingham |isbn=978-1-7821-6654-2 |url=http://www.packtpub.com/social-data-visualization-with-html5-and-javascript/book |accessdate=2018-09-12 |archive-date=2014-08-02 |archive-url=https://web.archive.org/web/20140802051803/http://www.packtpub.com/social-data-visualization-with-html5-and-javascript/book |dead-url=no }}
;D3.js進階相關文章
* {{citation |first1=Mike |last1=Dewar |title=Getting Started with D3 |series=Creating Data-Driven Documents |edition=1st |editor1-first=Julie |editor1-last=Steele |editor2-first=Meghan |editor2-last=Blanchette |date=June 2012 |publisher=[[O’Reilly Media]] |place=Sebastopol, California |isbn=978-1-4493-2879-5 |url=https://books.google.com/books?id=-1Zk213nXsYC }}
* {{citation |first1=Nick |last1=Qi Zhu |title=Data Visualization with D3.js Cookbook |edition=1st |date=October 2013 |publisher=[[Packt Publishing]] |place=Birmingham |isbn=978-1-7821-6216-2 |url=http://www.packtpub.com/data-visualization-with-d3-js-cookbook/book |accessdate=2018-09-12 |archive-date=2014-07-24 |archive-url=https://web.archive.org/web/20140724153842/https://www.packtpub.com/data-visualization-with-d3-js-cookbook/book |dead-url=no }}
;其他D3.js相關文章
* {{citation|last1=Newton|first1=Thomas|last2=Villarreal|first2=Oscar|title=Learning D3.js Mapping|date=2014|publisher=[[Packt Publishing]]|place=Birmingham|isbn=9781783985609|page=126|url=https://www.packtpub.com/web-development/learning-d3js-mapping|accessdate=2018-09-12|archive-date=2018-09-13|archive-url=https://web.archive.org/web/20180913002440/https://www.packtpub.com/web-development/learning-d3js-mapping|dead-url=no}}
* {{citation|url=https://www.packtpub.com/web-development/mastering-d3js|title=Mastering D3.js|first=Pablo|last=Navarro Castillo|year=2014|publisher=[[Packt Publishing]]|place=Birmingham|isbn=9781783286270|page=352|accessdate=2018-09-12|archive-date=2018-09-13|archive-url=https://web.archive.org/web/20180913002433/https://www.packtpub.com/web-development/mastering-d3js|dead-url=no}}
* {{citation|url=https://www.packtpub.com/web-development/data-visualization-d3js|title=Data Visualization with d3.js|first=Swizec|last=Teller|year=2013|publisher=[[Packt Publishing]]|place=Birmingham|isbn=9781782160007|page=194|accessdate=2018-09-12|archive-date=2018-09-13|archive-url=https://web.archive.org/web/20180913002447/https://www.packtpub.com/web-development/data-visualization-d3js|dead-url=no}}
* {{citation|url=http://shop.oreilly.com/product/9781939902023.do|title=Developing a D3.js Edge: Constructing Reusable D3 Components and Charts|first=Christophe|last=Viau|year=2013|publisher=[[Bleeding Edge Press]]|isbn=9781939902023|page=268|accessdate=2018-09-12|archive-date=2014-09-03|archive-url=https://web.archive.org/web/20140903081155/http://shop.oreilly.com/product/9781939902023.do|dead-url=yes}}
* {{citation|url=https://www.amazon.com/D3-js-Action-Elijah-Meeks/dp/1617292117/ref=sr_1_1?ie=UTF8&qid=1409163691&sr=8-1&keywords=elijah+meek|title=D3.js in Action|first=Elijah|last=Meeks|year=2014|publisher=[[Manning Publications]]|isbn=9781617292118|page=325|accessdate=2018-09-12|archive-date=2019-09-24|archive-url=https://web.archive.org/web/20190924221021/https://www.amazon.com/D3-js-Action-Elijah-Meeks/dp/1617292117/ref=sr_1_1?ie=UTF8&qid=1409163691&sr=8-1&keywords=elijah+meek|dead-url=no}}
* {{citation|url=https://leanpub.com/D3-Tips-and-Tricks|title=D3 Tips and Tricks|first=Malcolm|last=Maclean|year=2014|publisher=[[Leanpub]]|page=580|accessdate=2018-09-12|archive-date=2018-09-13|archive-url=https://web.archive.org/web/20180913002442/https://leanpub.com/D3-Tips-and-Tricks|dead-url=no}}
* {{citation|url=http://www.informit.com/store/visual-storytelling-with-d3-an-introduction-to-data-9780321933171|title=Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript|first=Ritchie|last=King|year=2014|publisher=[[Addison-Wesley Data & Analytics Series]]|page=288|accessdate=2018-09-12|archive-date=2018-09-13|archive-url=https://web.archive.org/web/20180913002302/http://www.informit.com/store/visual-storytelling-with-d3-an-introduction-to-data-9780321933171|dead-url=no}}
;影片資源
* {{citation |first1=Nikhil |last1=Gopal |title=D3 and CoffeeScript: A Python Programmer's Introduction to Web Visualizations |date=October 2014 |publisher=[[O’Reilly Media]] |place=Sebastopol, California |url=http://shop.oreilly.com/product/110000663.do |accessdate=2018-09-12 |archive-date=2018-09-13 |archive-url=https://web.archive.org/web/20180913041523/http://shop.oreilly.com/product/110000663.do |dead-url=no }}
* {{citation |first1=Ritchie |last1=King |title=D3 Visualization LiveLessons: An Introduction to Data Visualization in JavaScript |date=December 2014 |publisher=[[Addison-Wesley Professional]] |url=http://www.informit.com/store/d3-visualization-livelessons-an-introduction-to-data-9780134087139 |accessdate=2018-09-12 |archive-date=2018-09-13 |archive-url=https://web.archive.org/web/20180913002431/http://www.informit.com/store/d3-visualization-livelessons-an-introduction-to-data-9780134087139 |dead-url=no }}
{{Refend|2}}

== 外部連結 ==
{{Commons category|D3.js}}
{{Portal|自由软件|软件|信息技术}}
* {{official website|d3js.org}}
* [https://github.com/d3/d3/wiki/Gallery/ D3.js Gallery]{{Wayback|url=https://github.com/d3/d3/wiki/Gallery/ |date=20180913033844 }}
* [http://bl.ocksplorer.org Blocksplorer]{{Wayback|url=http://bl.ocksplorer.org/ |date=20150119223658 }}, search for blocks by methods used

{{可视化}}

[[Category:JavaScript函式庫]]
[[Category:用JavaScript編程的自由軟體]]
[[Category:自由數據可視化軟件]]
[[Category:使用BSD许可证的软件]]

D3.js - 版本历史

imported>Taeas：​维护清理

imported>Taeas：维护清理