d3.js:數(shù)據(jù)可視化利器之 selection：選擇集

看見就非常 2015-04-24

展開全文

選擇集/selection

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

dom->selection

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

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

select：選中單個元素

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

有兩種方法調用select()：

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

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

d3.select(selector)

將DOM對象轉化為選擇集對象

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

d3.select(node)

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

selectAll：選中多個元素

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

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

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

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

d3.selectAll(selector)

將一組DOM對象轉化為選擇集對象

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

d3.selectAll(nodes)

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

為什么需要選擇集？

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

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

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

pipeline

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

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

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

data-pipeline

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