d3.js:數據可視化利器之 selection：選擇集

 

選擇集/selection

選擇集/selection是d3中的核心對象，用來封裝一組從當前HTML文檔中選中的元素：

d3提供了兩個方法用來建立selection對象：

• select(selector) ： 只使用第一個匹配的元素建立選擇集。
• selectAll(selector) : 使用所有匹配的元素建立選擇集。

select：選中單個元素

select()方法用來建立最多只包含一個DOM元素的選擇集。若是當前文檔中 沒有匹配的元素，則創建一個空選擇集；若是當前文檔中有多個匹配的元素， 也只用第一個匹配元素創建選擇集。

有兩種方法調用select()：

• 使用CSS3選擇符指定匹配條件

最經常使用的調用方法是傳入一個CSS3選擇符字符串：

1. d3.select(selector)

• 將DOM對象轉化爲選擇集對象

有時咱們須要將一個DOM對象轉化爲一個選擇集對象，這時能夠直接向select() 方法傳入這個DOM對象：

1. d3.select(node)

一種常見的應用場景是在事件回調函數中，將this轉化成選擇集對象： d3.select(this)，由於這時this指向觸發事件的DOM元素。

selectAll：選中多個元素

selectAll()方法用來建立可包含多個DOM元素的選擇集。若是當前文檔中 沒有匹配的元素，則創建一個空選擇集；若是當前文檔中有多個匹配的元素， 則使用全部匹配元素創建選擇集。

和select()方法同樣，也有兩種方式調用selectAll()方法：

• 使用CSS3選擇符指定匹配條件

最經常使用的調用方法是傳入一個CSS3選擇符字符串：

1. d3.selectAll(selector)

• 將一組DOM對象轉化爲選擇集對象

若是已經得到了一組DOM對象，能夠直接將其轉化爲選擇集對象：

1. d3.selectAll(nodes)

好比，在事件回調函數中，使用d3.select(this.childNodes)建立選擇集。

爲何須要選擇集？

d3定義選擇集對象的一個目的是封裝對DOM的操做。選擇集提供了衆多的方法（d3稱之爲 操做符/operator）來進行DOM操做，好比設置屬性、樣式、文本內容以及監聽 DOM事件等。從這個角度看，d3的選擇集對象相似於jQuery中的$對象，若是你 從jQuery過來，應該容易理解這一點：

1. var s = d3.selectAll("div"); //選中全部div元素建立選擇集對象:s
2. s.text("demo"); //使用選擇集對象的text()方法設置這些div元素的文本內容
3. var $s = $("div"); //選中全部div元素建立jQuery對象:$s
4. $s.text("demo"); //使用jQuery對象的text()方法設置這些div元素的文本內容

有趣的是，d3的選擇集對象和jQuery對象同樣，也具備鏈式調用的能力。絕大多數的選擇 集操做符返回的結果仍是一個選擇集（可能和最初的選擇集內容不同），這使得調用能夠持續下去， 像一條流水線：

容易理解，選擇集是d3中文檔處理流水線的開端，選擇集的操做符就是流水線中的各個 處理環節，當選擇集流過流水線，原始文檔的修改就天然而然地發生了。

 

插入數據驅動環節

d3定義選擇集對象的更深層次的目的是封裝數據驅動能力。經過data() 操做符，d3使數據化可視化工做者可以以一種聲明式的方式指定處理流水線，從而 簡化從數據到文檔的處理過程：

和style()這樣的操做符不一樣，data()操做符可以改變選擇集的內容。 當選擇集流過style()環節後，選擇集的內容並沒有變化，變化的是選擇集中 各個DOM對象的屬性。然而，當一個選擇集流過data()環節後，將得到一個不一樣的選擇集： 所包含的DOM對象發生了變化。

each: 定製處理行爲

each()方法容許咱們定製對選擇集中DOM元素的處理行爲：

1. 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/

參考資料：http://www.hubwiz.com/