D3.js

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）的杰佛瑞·赫尔、Mike_Bostock和瓦迪姆·欧格菲兹齐利用开发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网页元素，将之改成方形类别、移动位置、并更换颜色为淡紫色在D3.js中只要使用简单的程式码即可完成：
d3.selectAll("p")                 // 选择所有  网页元素
.style("color", "lavender")     // 将颜色 "color" 样式改成 "lavender" 淡紫色 (薰衣草色)
.attr("class", "squares")       // 将 "class" 改成 "squares"
.attr("x", 50);                 // 将属性值 "x" (水平位置) 改为 50px

**动态改变物件状态**
透过D3.js定义的物件成员函数function transition (name)则可以在一定时间内平滑地改变物件的属性或样式的值，例如可以在500毫秒内逐渐将所有的p网页元素渐变为粉红色：
d3.selectAll("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**
D3.js可以与Three.js结合，透过结合了D3.js的资料视觉化、图表产生与Three.js的WebGL特性可以实现三维资料视觉化、图表的呈现。

**参考文献**

**延伸阅读**
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 

**外部连结**
 d3js.org-  D3.js Gallerydate=20180913033844 -  Blocksplorerdate=20150119223658 , search for blocks by methods used