D3.js系列——
D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個被數據驅動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 JavaScript 的函數庫，使用它主要是用來做數據可視化的。
D3 提供了各種簡單易用的函數，大大簡化了 JavaScript 操作數據的難度。由於它本質上是 JavaScript ，所以用 JavaScript 也是可以實現所有功能的，但它能大大減小你的工作量，尤其是在數據可視化方面，D3 已經將生成可視化的復雜步驟精簡到了幾個簡單的函數，你只需要輸入幾個簡單的數據，就能夠轉換為各種絢麗的圖形。
一、使用與安裝
D3 是一個 JavaScript 函數庫，並不需要通常所說的“安裝”。它只有一個文件，在 HTML 中引用即可。有兩種方法：
（1）下載 D3.js 的文件
- d3.zip
解壓後，在 HTML 文件中包含相關的 js 文件即可。
（2）還可以直接包含網絡的鏈接，這種方法較簡單：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
但使用的時候要保持網絡連接有效，不能再斷網的情況下使用。
二、用D3的一個小實例
使用 D3.js 來修改p標簽的兩行，只需添加一行代碼即可。註意不要忘了引用 D3.js 源文件。
<html>
<head>
<meta charset="
其實 D3.js 中的所有功能在 JavaScript 中都能實現，它僅僅是一個函數庫而已。D3 所做的事就是減輕你的工作量，以及使你的代碼十分簡單易懂。
接下來改變字體的顏色和大小，稍微修改上述代碼：
//選擇<body>中所有的<p>，其文本內容為 www.ourd3js.com，選擇集保存在變量 p 中
var p = d3.select("body")
.selectAll("p")
.text("www.ourd3js.com");
//修改段落的顏色和字體大小
p.style("color","red").style("font-size","72px");
上面的代碼是先將選中的元素賦值給變量 p，然後通過變量 p 來改變樣式，這樣可以使代碼更整潔。
這裏涉及一個概念：選擇集。使用 d3.select() 或 d3.selectAll() 選擇元素後返回的對象，就是選擇集。
另外，有人會發現，D3 能夠連續不斷地調用函數，形如：d3.select().selectAll().text()；這稱為鏈式語法，和 JQuery 的語法很像，常用 JQuery 的朋友一定會感到很親切。
三、如何選擇元素
在 D3 中，用於選擇元素的函數有兩個：
（1）d3.select()：是選擇所有指定元素的第一個
（2）d3.selectAll()：是選擇指定元素的全部
這兩個函數返回的結果稱為選擇集。例如，選擇集的常見用法如下：
var body = d3.select("body"); //選擇文檔中的body元素
var p1 = body.select("p"); //選擇body中的第一個p元素
var p = body.selectAll("p"); //選擇body中的所有p元素
var svg = body.select("svg"); //選擇body中的svg元素
var rects = svg.selectAll("rect"); //選擇svg中所有的svg元素
選擇集和綁定數據通常是一起使用的。
四、如何綁定數據
D3 有一個很獨特的功能：能將數據綁定到 DOM 上，也就是綁定到文檔上。這麽說可能不好理解，例如：網頁中有段落元素 <p> 和一個整數 5，於是可以將整數 5 與 <p>綁定到一起。綁定之後，當需要依靠這個數據才操作元素的時候，會很方便。
D3 中是通過以下兩個函數來綁定數據的：
（1）datum()：綁定一個數據到選擇集上
（2）data()：綁定一個數組到選擇集上，數組的各項值分別與選擇集的各元素綁定
相對而言，data() 比較常用。
假設現在有三個段落元素如下。
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
接下來分別使用 datum() 和 data()，將數據綁定到上面三個段落元素上。
1、datum()
假設有一字符串 China，要將此字符串分別與三個段落元素綁定，代碼如下：
var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
return "第 "+ i + " 個元素綁定的數據是 " + d;
});
綁定數據後，使用此數據來修改三個段落元素的內容，其結果如下：
第 0 個元素綁定的數據是 China
第 1 個元素綁定的數據是 China
第 2 個元素綁定的數據是 China
在上面的代碼中，用到了一個無名函數 function(d, i)。當選擇集需要使用被綁定的數據時，常需要這麽使用。其包含兩個參數，其中：
（1）d 代表數據，也就是與某元素綁定的數據。
（2） i 代表索引，代表數據的索引號，從 0 開始。
例如，上述例子中：第 0 個元素 apple 綁定的數據是 China。
2、data()
有一個數組，接下來要分別將數組的各元素綁定到三個段落元素上。
var dataset = ["I like dogs","I like cats","I like snakes"];
調用 data() 綁定數據，並替換三個段落元素的字符串為被綁定的字符串，代碼如下：
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d, i){
return d;
});
這段代碼也用到了一個無名函數 function(d, i)，其對應的情況如下：
當 i == 0 時， d 為 I like dogs。
當 i == 1 時， d 為 I like cats。
當 i == 2 時， d 為 I like snakes。
此時，三個段落元素與數組 dataset 的三個字符串是一一對應的，因此，在函數 function(d, i) 直接 return d 即可。結果自然是三個段落的文字分別變成了數組的三個字符串。
D3.js系列——