D3js学习–update, enter, exit 的使用
1. update()
当对应的元素正好满足时 （ 绑定数据数量 = 对应元素 ）
实际上并不存在这样一个函数，只是为了要与之后的 enter() 和 exit() 一起说明才认为有这样一个函数。当对应元素正好满足时，后面直接跟 text ，style 等操作即可。
2. enter()
当对应的元素不足时 （ 绑定数据数量 > 对应元素 ）
当对应的元素不足时，要添加元素，使之与绑定数据的数量相等。后面跟 append 函数添加元素。
3. exit()
当对应的元素过多时 （ 绑定数据数量 < 对应元素 ）
当对应的元素过多时，通常要删除元素，使之与绑定数据的数量相等。后面跟 remove 函数删除元素。
4. 使用方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<body>
<p>AAAAAAAAA</p>
<p>BBBBBBBBB</p>
<p>CCCCCCCCC</p>
<script src=“http://d3js.org/d3.v3.min.js” charset=“utf-8”></script>
<script>
var dataset = [ 10 , 20 , 30 , 40 , 50 ];
var update = d3.select(“body”).selectAll(“p”).data(dataset);
var enter = update;
update.text(function(d,i){
return “update “ + d;
});
enter.enter()
.append(“p”)
.text(function(d,i){
return “enter “ + d;
});
</script>
</body>
|
上面的代码分别用了变量名 update 和 enter 来表示各自的部分，运行结果如图：
图中可以看到新添加的元素 enter 的部分。
接下来修改部分代码，看看怎么用 exit 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var dataset = [ 10 , 20 ];
var update = d3.select(“body”).selectAll(“p”).data(dataset);
var exit = update;
update.text(function(d,i){
return “update “ + d;
});
exit.exit()
.text(function(d,i){
return “exit”;
});
|
结果图为：
可以看到，调用 exit() 函数后，实际上是返回没有对应数据的元素。我们可以删除掉多余的元素，如下：
|
1
2
|
exit.exit()
.remove();
|
enter 函数的使用最为多见。因为用 D3 做数据可视化时，有需要的数据，且数据量巨大，DOM 却中很少有与之对应数量的元素。所以要特别熟练 enter 的使用方法
