d3.js在綁定數據后，一般會看到enter或exit兩個函數。那它們到底是做什么用的呢？直接看一下代碼和效果：
既然是JavaScript的框架，我們就用一個HTML文檔作為測試的起點。
<html>
<head>
<meta charset="utf-8">
<title>d3.js Test</title>
</head>
<body>
<p>原始數據：1</p>
<p>原始數據：2</p>
<script type="text/javascript" src="./d3/d3.js"></script>
<script type="text/javascript">
//JS代碼所在位置
</script>
</body>
</html>
1 .當DOM中元素多于所綁定的數據個數時，使用enter配合append函數可以給文檔添加缺少的元素。
var ds = [1, 2, 3, 4, 5];
var body = d3.select('body'); //選擇body節點
body.selectAll('p')
.data(ds)
.enter()
.append('p')
.text(function(d) {
return "數據：" + d;
});
結果HTML為：
<html>
<head>
<meta charset="utf-8">
<title>d3.js Test</title>
</head>
<body>
<p>原始數據：1</p>
<p>原始數據：2</p>
<script type="text/javascript" src="./d3/d3.js"></script>
<script type="text/javascript">
var ds = [1, 2, 3, 4, 5];
var body = d3.select('body'); //選擇body節點
body.selectAll('p') //選擇所有p標簽
.data(ds) //綁定數據集
.enter()
.append('p')
.text(function(d) {
return '數據：' + d;
});
</script>
</body>
</html>
2 . exit函數配合remove則剛好相反，能夠把多于數據集的部分從文檔中移除。
var ds = [1];
var body = d3.select('body'); //選擇body節點
body.selectAll('p') //選擇所有p標簽
.data(ds) //綁定數據集
.exit()
.remove();
結果HTML文檔為：
<html>
<head>
<meta charset="utf-8">
<title>d3.js Test</title>
</head>
<body>
<p>原始數據：1</p>
<script type="text/javascript" src="./d3/d3.js"></script>
<script type="text/javascript">
var ds = [1];
var body = d3.select('body'); //選擇body節點
body.selectAll('p') //選擇所有p標簽
.data(ds) //綁定數據集
.exit()
.remove();
</script>
</body>
</html>
