牛逼的js--就是d3.js

接觸d3.js是因爲leader讓我研究它並運用到新項目開發中去，所以就花時間瞭解了一下。寫下此文來和大家分享學習，如有不足，歡迎指正。

首先，說下我對d3.js的理解。

d3其實就是一個框架，就像是juery一樣，封裝一些功能。

d3全稱：Data-Driven Documents,是一個JavaScript庫,用於操縱基於數據的文檔。D3幫助你通過使用HTML、SVG和CSS給數據帶來活力。D3強調web標準，給你提供現代瀏覽器的各種能力，而不是把你束縛在專有的框架中,結合強大的可視化組件和數據驅動方式的DOM操作。

下載最新版本：d3.v3.zip

或者,直接鏈接到最新版本,複製這個代碼片段:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></scrip>

1.介紹　　 LEARN MORE

　 D3允許您綁定任意數據到一個文檔對象模型(DOM),然後採用數據驅動轉換成文檔。例如,您可以使用D3把一個數字數組生成一個HTML表。或者,使用相同的數據通過平穩的過渡和交互，創建一個交互式SVG條形圖。　　　　

D3不是旨在提供功能的單一框架。相反,D3解決了問題的癥結所在:有效的基於數據操縱文檔，展現了web標準(如HTML5和CSS3,SVG）的完整功能。D3用最快的速度，最小的開銷,支持大型數據集、動態行爲交互和動畫。D3通過整合不同的組件和插件，允許代碼重用。

2.選擇(Selections) LEARN MORE Selections

傳統的修改文件的方法很乏味:方法名冗長,命令需要手動迭代，記住臨時狀態等。例如,改變文本顏色的段落元素:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

而d3則可以聲明方法來選擇操作任意組節點。

例如,您可以重寫上述循環:

d3.selectAll("p").style("color", "white");

也可以根據需要操作單獨的節點：

d3.select("body").style("background-color", "black");

選擇器支持本地的現代瀏覽器,向後兼容老式瀏覽器可以通過 Sizzle。上面的示例選擇節點的標籤名稱(分別爲“p”和“body”)。可以使用包括容器、屬性值、類和ID來作爲選擇元素。　　　　

D3提供了許多方法來改變節點:設置屬性，註冊事件偵聽器，添加、移除或排序節點，改變HTML或文本內容。直接訪問底層DOM也是可能的,因爲每個D3只是選擇一組節點。

3.動態屬性（Dynamic Properties）

讀者若是熟悉其他DOM框架，如jquery，應該能很快發現與D3的相似性。然而，在D3中樣式、屬性和其他參數都可以被指定爲函數的數據，而不僅僅是簡單的常量。D3提供了很多內置的可重用函數和函數工廠,如繪製圖形（ graphical primitives）、線和餅圖。這點很像HTML5的一些新特性。

例如,給段落隨機賦予顏色:

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";
});

計算屬性經常涉及數據綁定。data被定義爲一個數組的值,每個值作爲第一個參數傳遞(d)來選擇函數（對D3來說d是一個很重要的參數）。通過默認索引,數據中的第一個數組元素傳遞到第一個節點的選擇,第二個元素到第二個節點,等等。例如,如果給段落元素綁定一組數,您可以使用這些數據來計算動態字體大小:

d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

一旦數據被綁定到文檔,就可以省去數據操作，D3將檢索以前綁定的數據，這允許你可以再計算屬性而不需要重新連接。

4.輸入和輸出(Enter and Exit) LEARN MORE Enter and Exit

使用D3的輸入和輸出的選擇,您不再需要創建新的節點來輸入數據和刪除外溢節點。當選擇數據綁定時,則數組中的每個元素與選擇的節點對應。如果節點比數據少,則額外的數據元素形成輸入選擇,您可以通過附加輸入選擇進行實例化。例如:

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

更新節點是默認操作數據選擇的結果。因此,如果你忘記了輸入和輸出的選擇,將自動選擇存在對應數據的元素。

初始化選擇分成三個部分:修改更新節點,添加輸入節點和刪除輸出節點。

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();

通過這三種情況的處理,你可以具體說明哪些操作運行在哪些節點。這可以通過轉換提高性能和控制。例如,有一個條形圖，你可能會用舊的規模初始化輸入條形，然後隨着更新和輸出條形，過渡輸入條形到新的規模。

D3讓您基於數據轉換文檔，這包括創建和銷燬元素。D3允許你改變一個現有的文檔以響應用戶交互、超時動畫,甚至來自第三方的一個異步通知。

5. 過渡(Transitions)

過渡隨着時間逐漸插入styles 和 attributes ，可以通過像“elastic”,“cubic-in-out”,“linear”等功能來控制漸變。

例如，漸變背景色爲黑色。

d3.select("body").transition()
    .style("background-color", "black");

又或者，在一個符號圖中通過交錯延遲來調整圓的大小。

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });