d3.js:數據可視化利器之 selection：選擇集
選擇集/selection
選擇集/selection是d3中的核心對象，用來封裝一組從當前HTML文檔中選中的元素：
d3提供了兩個方法用來創建selection對象：
- select(selector) ： 只使用第一個匹配的元素創建選擇集。
- selectAll(selector) : 使用全部匹配的元素創建選擇集。
select：選中單個元素
select()方法用來創建最多只包含一個DOM元素的選擇集。如果當前文檔中 沒有匹配的元素，則建立一個空選擇集；如果當前文檔中有多個匹配的元素， 也只用第一個匹配元素建立選擇集。
有兩種方法調用select()：
- 使用CSS3選擇符指定匹配條件
最常用的調用方法是傳入一個CSS3選擇符字符串：
d3.select(selector)
- 將DOM對象轉化為選擇集對象
有時我們需要將一個DOM對象轉化為一個選擇集對象，這時可以直接向select() 方法傳入這個DOM對象：
d3.select(node) 一種常見的應用場景是在事件回調函數中，將this轉化成選擇集對象： d3.select(this)，因為這時this指向觸發事件的DOM元素。
selectAll：選中多個元素
selectAll()方法用來創建可包含多個DOM元素的選擇集。如果當前文檔中 沒有匹配的元素，則建立一個空選擇集；如果當前文檔中有多個匹配的元素， 則使用所有匹配元素建立選擇集。
和select()方法一樣，也有兩種方式調用selectAll()方法：
- 使用CSS3選擇符指定匹配條件
最常用的調用方法是傳入一個CSS3選擇符字符串：
d3.selectAll(selector)
- 將一組DOM對象轉化為選擇集對象
如果已經獲得了一組DOM對象，可以直接將其轉化為選擇集對象：
d3.selectAll(nodes) 比如，在事件回調函數中，使用d3.select(this.childNodes)創建選擇集。
為什么需要選擇集？
d3定義選擇集對象的一個目的是封裝對DOM的操作。選擇集提供了眾多的方法（d3稱之為 操作符/operator）來進行DOM操作，比如設置屬性、樣式、文本內容以及監聽 DOM事件等。從這個角度看，d3的選擇集對象類似于jQuery中的$對象，如果你 從jQuery過來，應該容易理解這一點：
- var s = d3.selectAll("div"); //選中所有div元素創建選擇集對象:s
- s.text("demo"); //使用選擇集對象的text()方法設置這些div元素的文本內容
- var $s = $("div"); //選中所有div元素創建jQuery對象:$s
- $s.text("demo"); //使用jQuery對象的text()方法設置這些div元素的文本內容
有趣的是，d3的選擇集對象和jQuery對象一樣，也具有鏈式調用的能力。絕大多數的選擇 集操作符返回的結果還是一個選擇集（可能和最初的選擇集內容不一樣），這使得調用可以持續下去， 像一條流水線：
容易理解，選擇集是d3中文檔處理流水線的開端，選擇集的操作符就是流水線中的各個 處理環節，當選擇集流過流水線，原始文檔的修改就自然而然地發生了。
插入數據驅動環節
d3定義選擇集對象的更深層次的目的是封裝數據驅動能力。通過data() 操作符，d3使數據化可視化工作者能夠以一種聲明式的方式指定處理流水線，從而 簡化從數據到文檔的處理過程：
和style()這樣的操作符不同，data()操作符能夠改變選擇集的內容。 當選擇集流過style()環節后，選擇集的內容并沒有變化，變化的是選擇集中 各個DOM對象的屬性。然而，當一個選擇集流過data()環節后，將獲得一個不同的選擇集： 所包含的DOM對象發生了變化。
each: 定制處理行為
each()方法允許我們定制對選擇集中DOM元素的處理行為：
selection.each(func) 參數func是調用者定義的函數，在d3中被稱為訪問器/accessor。 d3將對選擇集中的每一個DOM對象，依次調用該訪問器函數。
在調用訪問器函數時，d3會將this指向當前要處理的DOM對象， 并傳入兩個參數：
- datum : 當前DOM對象對應的數據
- index ：當前DOM對象在集合中的序號
可以認為訪問器是d3流水線中每個處理環節用戶邏輯的封裝接口，d3通過這個接口， 實現了流水線框架和用戶處理邏輯的解耦：
幾乎所有的操作符在內部實現中都使用了each()，每當d3提供的操作符 不能滿足你的需求時，都不妨試一試each()。
示例演示： http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/