選擇元素和綁定數(shù)據(jù)是 D3 最基礎(chǔ)的內(nèi)容，本文將對其進(jìn)行一個簡單的介紹。

http://wiki.jikexueyuan.com/project/d3wiki/images/selection-1.png" alt="綁定數(shù)據(jù)" />

如何選擇元素

在 D3 中，用于選擇元素的函數(shù)有兩個：

• d3.select()：是選擇所有指定元素的第一個
• d3.selectAll()：是選擇指定元素的全部

這兩個函數(shù)返回的結(jié)果稱為選擇集。

例如，選擇集的常見用法如下。

var body = d3.select("body"); //選擇文檔中的body元素
var p1 = body.select("p");      //選擇body中的第一個p元素
var p = body.selectAll("p");    //選擇body中的所有p元素
var svg = body.select("svg");   //選擇body中的svg元素
var rects = svg.selectAll("rect");  //選擇svg中所有的svg元素

選擇集和綁定數(shù)據(jù)通常是一起使用的。

如何綁定數(shù)據(jù)

D3 有一個很獨(dú)特的功能：能將數(shù)據(jù)綁定到 DOM 上，也就是綁定到文檔上。這么說可能不好理解，例如網(wǎng)頁中有段落元素 p 和一個整數(shù) 5，于是可以將整數(shù) 5 與 p 綁定到一起。綁定之后，當(dāng)需要依靠這個數(shù)據(jù)才操作元素的時候，會很方便。

D3 中是通過以下兩個函數(shù)來綁定數(shù)據(jù)的：

• datum()：綁定一個數(shù)據(jù)到選擇集上
• data()：綁定一個數(shù)組到選擇集上，數(shù)組的各項值分別與選擇集的各元素綁定

相對而言，data() 比較常用。

假設(shè)現(xiàn)在有三個段落元素如下。

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

datum()

假設(shè)有一字符串 China，要將此字符串分別與三個段落元素綁定，代碼如下：

var str = "China";

var body = d3.select("body");
var p = body.selectAll("p");

p.datum(str);

p.text(function(d, i){
    return "第 "+ i + " 個元素綁定的數(shù)據(jù)是 " + d;
});

綁定數(shù)據(jù)后，使用此數(shù)據(jù)來修改三個段落元素的內(nèi)容，其結(jié)果如下：

第 0 個元素綁定的數(shù)據(jù)是 China

第 1 個元素綁定的數(shù)據(jù)是 China

第 2 個元素綁定的數(shù)據(jù)是 China

在上面的代碼中，用到了一個無名函數(shù) function(d, i)。當(dāng)選擇集需要使用被綁定的數(shù)據(jù)時，常需要這么使用。其包含兩個參數(shù)，其中：

• d 代表數(shù)據(jù)，也就是與某元素綁定的數(shù)據(jù)。
• i 代表索引，代表數(shù)據(jù)的索引號，從 0 開始。

例如，上述例子中：第 0 個元素 apple 綁定的數(shù)據(jù)是 China。

data()

有一個數(shù)組，接下來要分別將數(shù)組的各元素綁定到三個段落元素上。

var dataset = ["I like dog","I like cat","I like snake"];

綁定之后，其對應(yīng)關(guān)系的要求為：

• Apple 與 I like dog 綁定
• Pear 與 I like cat 綁定
• Banana 與 I like snake 綁定

調(diào)用 data() 綁定數(shù)據(jù)，并替換三個段落元素的字符串為被綁定的字符串，代碼如下：

var body = d3.select("body");
var p = body.selectAll("p");

p.data(dataset)
  .text(function(d, i){
      return d;
  });

這段代碼也用到了一個無名函數(shù) function(d, i)，其對應(yīng)的情況如下：

• 當(dāng) i == 0 時， d 為 I like dog。
• 當(dāng) i == 1 時， d 為 I like cat。
• 當(dāng) i == 2 時， d 為 I like snake。

此時，三個段落元素與數(shù)組 dataset 的三個字符串是一一對應(yīng)的，因此，在函數(shù) function(d, i) 直接 return d 即可。

結(jié)果自然是三個段落的文字分別變成了數(shù)組的三個字符串。

I like dog

I like cat

I like snake