一、使用datum（）綁定數據
<body>
<p>Fire</p>
<p>Water</p>
<p>Wind</p>
<script>
var p = d3.select("body").selectAll("p");
p.datum("Thunder") //綁定字符串Thunder到選擇集上
.text(function(d,i){ //替換內容
return d + " " + i;
});
</script>
</body> 可以將其輸出在控制檯看到：
二、使用data（）綁定數據
首先我們來看一下data（）與datum（）的區別：
data（）與datum（）都只是純粹地將元素它的值與選擇集綁定在了一起，但是如果想要在瀏覽器上看到文本效果，還需要調用text（）來替換字符串，並展示出來。區別：假設要綁定的數組爲[3,6,9]，那麼我們希望第一個p元素綁定3，第二個綁定6，第三個綁定9。這種情況就需要使用data()函數，如果使用datum()，則會將數組本身綁定到各元素上，即第一個p元素綁定[3,6,9]，第二個綁定[3,6,9]，第三個也是綁定[3,6,9]，其區別如圖1所示：
//定義數組
var dataset = [3, 6, 9];
//選擇body中的p元素
var p = d3.select("body").selectAll("p");
//綁定數據到選擇集
var update = p.data(dataset);
//輸出綁定的結果
console.log(update); 
data()函數返回一個對象，對象裏包含update部分和兩個函數。一個是enter()函數，返回enter部分，一個是exit()函數，返回exit部分。請看如下代碼：
var dataset = [3, 6, 9, 12, 15];
var p = d3.select("body").selectAll("p");
var update = p.data(dataset);
console.log(update);
console.log(update.enter());
console.log(update.exit()); 
圖（1）
圖（2）
可以看到enter部分中，D3已經爲多餘的數組項12和15預留了位置，用於將來的操作。enter部分中還有一個update變量，指向update部分。本次綁定中，沒有多餘的元素，所以exit中沒有內容。如果將數組換成：
![]()
var dataset = [3]; 
圖（3）
data()函數是按照索引號依次綁定數組各項的。第0個元素綁定數組的第0項，第1個元素綁定數組的第1項，依此類推。也可以不按照此順序進行綁定，這就要用到data()的第二個參數。這個參數是一個函數，稱爲鍵函數（key function）：
<body>
<!-- 三個空的p元素 -->
<p></p>
<p></p>
<p></p>
<script>
//數據
var persons = [ { id: 3 , name:"張三" },
{ id: 6 , name:"李四" },
{ id: 9 , name:"王五" }];
//選擇body中的所有的p元素
var p = d3.select("body").selectAll("p");
//綁定數據，並修改p元素的內容
p.data(persons)
.text(function(d){
return d.id + " : " + d.name;
});
</script>
</body> 3 : 張三
6 : 李四
9 : 王五
下面將persons裏的數據更新，再綁定一次數據。本次綁定添加鍵函數：
下面將persons裏的數據更新，再綁定一次數據。本次綁定添加鍵函數：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇集與數據綁定</title>
</head>
<body>
<p></p>
<p></p>
<p></p>
<script src=" d3.js"></script>
<script>
persons = [ { id: 6 , name:"張三" },
{ id: 9 , name:"李四" },
{ id: 3 , name:"王五" }];
var p = d3.select("body").selectAll("p")
p.data(persons, function(d){return d.id })
.text(function(d){
return d.id + " : " + d.name;
});
</script>
</body>
</html>- <p>3 : 王五</p>
- <p>6 : 張三</p>
- <p>9 : 李四</p>
三、update、enter、exit的處理模板
var dataset = [10, 20, 30];
var p = d3.select("body").selectAll("p");
//綁定數據後，分別返回update、enter、exit部分
var update = p.data(dataset);
var enter = update.enter();
var exit = update.exit();
//1.update部分的處理方法
update.text( function(d){ return d; } );
//2.enter部分的處理方法
enter.append("p")
.text( function(d){ return d; } );
//3.exit部分的處理方法
exit.remove();