D3.js

D3.js：
D3.js是一個基於數據操做文檔的JavaScript庫，它經過使用HTML，SVG和CSS，給數據帶來了生的形式。D3強調的是在web標準上無需給出你本身專用的框架，就能在現代瀏覽器上給出健全的性能，聯合了強大的數據可視化成分和數據驅動方法對於DOM操做

1.Introduction
D3容許綁定任意的數據到DOM上，而且請求數據驅動轉換到文檔上，例如，你能夠從一列數中經過使用D3去生成HTML表格，或者，使用一樣的數據去創造一個交互式的有平滑轉移和交互做用的SVG條狀圖。
D3不是一個龐大的尋找去提供每一個可能特色框架，而是解決了關鍵的難題：即基於數據有效的文檔操做，它避免了專注的陳述和負擔起了奇特的靈活性。暴露了這個web標準的健全性能好比HTML，SVG和CSS，憑藉極小的管理。D3是極度的快，支持大數據集，交互做用和動畫的動態行爲。D3的功能風格容許代碼經過多種多樣的官方收集和社區發展模塊重用
D3提供了諸多方法變化節點，設置屬性和風格，註冊事件監聽，增長，移除和排序節點，而且改變HTML或者文本內容。

2.Dynamic Properties
讀者熟悉其餘的DOM框架好比jQuery應該能當即辨認D3的類似性，包括風格，屬性和其餘的特徵能夠被具體化爲在D3中的數據函數，不單單是簡單的常量，儘管它的簡潔性顯而易見，這些函數是使人驚奇的強大，D3的geoPath函數，例如，突出geographic coordinate(地理座標)進入SVG路徑數據，D3提供了不少內置的重用的函數和函數工廠，好比關於區域的graphical primitive(地理原始)線圖和餅圖。
例如：隨機顏色段落：
` d3.selectAll("p").style("color",function(){
return "hsl("+Math.random()*360+ ",100%,50%)";
})`
關於奇數和偶數節點的陰影度
`d3.selectAll("p").style("color",function(d,i){
return i % 2 ? "#fff" : "#eee";
})`

計算屬性常常參考到數據限制，數據做爲一列值是具體的，而且每一個值被傳遞做爲第一個參數d到選擇函數，以默認的索引鏈接，數據隊列的第一個元素被傳遞到第一個選擇中的節點，第二個元素到第二個節點，等等，例如，若是你綁定一列數據到段落元素，你可使用這些數計算動態字體大小。
`d3.selectAll("p")
.data([4,8,15,16,23,42])
.style("font-size",function(d){
return d+"px";
});`
一旦數據被綁定到文檔，你能夠發射數據操做符，D3將檢索這個先前綁定的數據，這容許你重計算沒有綁定的屬性。

3.Enter and Exit
使用D3的進入退出選項，你能夠對輸入數據和移除不須要的輸出數據創造新節點。
當數據被綁定到一個選項中，在這一列數據中的每個元素都被成對的綁定到這個選項中的相應節點時，若是有比數據更少的節點，這個額外是數據元素你能夠添加到這個輸入選項實例化，例如
`d3.select("body")
.selectAll("p")
.data([4,8,16,23,42])
.enter()
.append("p")
.text(function(d){
return "i'm" number "+d+"!";
});`
更新節點是默認選項-數據操做的結果，所以，若是你忘記這個進入和退出選項，你將自動的選擇這些與數據相符合的存在元素，一般是打破這個初始選項進入這三個部分，更新修改，補充節點，移除已經存在節點。

更新：
`var p=d3.select("body")
.selectAll("p")
'data([4,8,16,23,42])
.text(function(d){return d;});`

進入
`p.enter().append("p")
.text(function(d){return d;});`

退出：
p.exit().remove();

4轉移
D3集中於天然的從轉換擴展到動畫的轉移，轉移隨着時間逐漸的插入樣式和屬性，這兩者之間能夠經過緩慢函數如「elastic"控制， 」cubic-in-out" 和 「linear」，D3的插入也支持原生函數，如數和數的嵌入以字符，複合值，你甚至能夠擴展D3的插入註冊支持複雜的屬性和數據結構

例如：變換這個背景到黑色
`d3.select("body")
.transition()
.style("background-color","black");`

或者，在一個字符圖中重定圓的大小以一個合適的延遲
`d3.selectAll("circle").transition()
.duration(750)
.delay(function(d){return i*10;})
.attr("r",function(d){
return Math.sqrt(d*scale);};`
經過修改這僅有的實際變化的屬性，D3減輕花費和容許生成大的圖形複雜度在一個高框架率，D3也容許經過事件序列化這個複雜轉移，而且，你可使用CSS3轉移，D3不替代這個瀏覽器工具盒，可是以一種方式曝光了它的簡單易用。