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不替代這個瀏覽器工具盒，但是以一種方式曝光了它的簡單易用。
D3.js