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>
网友评论