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