D3.js 入門系列 — 選擇元素和綁定數據

D3 容許將數據與被選擇的元素綁定在一塊兒，爲根據數據來操做元素提供方便。

如何選擇元素

在 D3 中，用於選擇元素的函數有兩個：

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

這兩個函數返回的結果稱爲選擇集，常見用法以下。

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元素

選擇集和綁定數據一般是一塊兒使用的。

如何綁定數據

D3 有一個很獨特的功能：能將數據綁定到 DOM 上，也就是綁定到文檔上。這麼說可能很差理解，例如網頁中有段落元素 p 和一個整數 5，因而能夠將整數 5 與 p 綁定到一塊兒。綁定以後，當須要依靠這個數據才操做元素的時候，會很方便。

D3 中是經過如下兩個函數來綁定數據的：

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

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

假設如今有三個段落元素以下。

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

接下來分別使用 datum() 和 data()，將數據綁定到上面三個段落元素上。

datum()

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

var str = "China";

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

p.datum(str);

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

綁定數據後，使用此數據來修改三個段落元素的內容，其結果以下：

第 0 個元素綁定的數據是 China 
第 1 個元素綁定的數據是 China 
第 2 個元素綁定的數據是 China 

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

• d 表明數據，也就是與某元素綁定的數據
• i 表明索引，表明數據的索引號，從 0 開始

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

data()

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

var dataset = ["I like dogs","I like cats","I like snakes"];

綁定以後，其對應關係的要求爲：

• Apple 與 I like dogs 綁定
• Pear 與 I like cats 綁定
• Banana 與 I like snakes 綁定

調用 data() 綁定數據，並替換三個段落元素的字符串爲被綁定的字符串，代碼以下：

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

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

這段代碼也用到了一個無名函數 function(d, i)，其對應的狀況以下：

• 當 i == 0 時， d 爲 I like dogs。
• 當 i == 1 時， d 爲 I like cats。
• 當 i == 2 時， d 爲 I like snakes。

此時，三個段落元素與數組 dataset 的三個字符串是一一對應的，所以，在函數 function(d, i) 直接 return d 便可。

結果天然是三個段落的文字分別變成了數組的三個字符串。

I like dogs  I like cats  I like snakes