選擇集/selection

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

d3提供了兩個方法用來創(chuàng)建selection對象：

select(selector) ： 只使用第一個匹配的元素創(chuàng)建選擇集。
selectAll(selector) : 使用全部匹配的元素創(chuàng)建選擇集。

select：選中單個元素

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

有兩種方法調(diào)用select()：

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

最常用的調(diào)用方法是傳入一個CSS3選擇符字符串：

d3.select(selector)

將DOM對象轉(zhuǎn)化為選擇集對象

有時我們需要將一個DOM對象轉(zhuǎn)化為一個選擇集對象，這時可以直接向select()方法傳入這個DOM對象：

d3.select(node)

一種常見的應(yīng)用場景是在事件回調(diào)函數(shù)中，將this轉(zhuǎn)化成選擇集對象：d3.select(this)，因為這時this指向觸發(fā)事件的DOM元素。

selectAll：選中多個元素

selectAll()方法用來創(chuàng)建可包含多個DOM元素的選擇集。如果當前文檔中 沒有匹配的元素，則建立一個空選擇集；如果當前文檔中有多個匹配的元素， 則使用所有匹配元素建立選擇集。

和select()方法一樣，也有兩種方式調(diào)用selectAll()方法：

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

最常用的調(diào)用方法是傳入一個CSS3選擇符字符串：

d3.selectAll(selector)

將一組DOM對象轉(zhuǎn)化為選擇集對象

如果已經(jīng)獲得了一組DOM對象，可以直接將其轉(zhuǎn)化為選擇集對象：

d3.selectAll(nodes)

比如，在事件回調(diào)函數(shù)中，使用d3.select(this.childNodes)創(chuàng)建選擇集。

為什么需要選擇集？

d3定義選擇集對象的一個目的是封裝對DOM的操作。選擇集提供了眾多的方法（d3稱之為操作符/operator）來進行DOM操作，比如設(shè)置屬性、樣式、文本內(nèi)容以及監(jiān)聽 DOM事件等。從這個角度看，d3的選擇集對象類似于jQuery中的$對象，如果你 從jQuery過來，應(yīng)該容易理解這一點：

var s = d3.selectAll("div"); //選中所有div元素創(chuàng)建選擇集對象:s
s.text("demo"); //使用選擇集對象的text()方法設(shè)置這些div元素的文本內(nèi)容
var $s = $("div"); //選中所有div元素創(chuàng)建jQuery對象:$s
$s.text("demo"); //使用jQuery對象的text()方法設(shè)置這些div元素的文本內(nèi)容

有趣的是，d3的選擇集對象和jQuery對象一樣，也具有鏈式調(diào)用的能力。絕大多數(shù)的選擇 集操作符返回的結(jié)果還是一個選擇集（可能和最初的選擇集內(nèi)容不一樣），這使得調(diào)用可以持續(xù)下去， 像一條流水線：

容易理解，選擇集是d3中文檔處理流水線的開端，選擇集的操作符就是流水線中的各個 處理環(huán)節(jié)，當選擇集流過流水線，原始文檔的修改就自然而然地發(fā)生了。

插入數(shù)據(jù)驅(qū)動環(huán)節(jié)

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

和style()這樣的操作符不同，data()操作符能夠改變選擇集的內(nèi)容。 當選擇集流過style()環(huán)節(jié)后，選擇集的內(nèi)容并沒有變化，變化的是選擇集中 各個DOM對象的屬性。然而，當一個選擇集流過data()環(huán)節(jié)后，將獲得一個不同的選擇集： 所包含的DOM對象發(fā)生了變化。

each: 定制處理行為

each()方法允許我們定制對選擇集中DOM元素的處理行為：

selection.each(func)

參數(shù)func是調(diào)用者定義的函數(shù)，在d3中被稱為訪問器/accessor。 d3將對選擇集中的每一個DOM對象，依次調(diào)用該訪問器函數(shù)。

在調(diào)用訪問器函數(shù)時，d3會將this指向當前要處理的DOM對象， 并傳入兩個參數(shù)：

datum : 當前DOM對象對應(yīng)的數(shù)據(jù)
index ：當前DOM對象在集合中的序號

可以認為訪問器是d3流水線中每個處理環(huán)節(jié)用戶邏輯的封裝接口，d3通過這個接口， 實現(xiàn)了流水線框架和用戶處理邏輯的解耦：

幾乎所有的操作符在內(nèi)部實現(xiàn)中都使用了each()，每當d3提供的操作符 不能滿足你的需求時，都不妨試一試each()。

示例演示：http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。