選擇集/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/

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

總結

以上是生活随笔為你收集整理的d3.js:数据可视化利器之 selection：选择集的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。