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