理解update-enter-exit三个函数的用法

Posted on | In |
Words count in article: 1k

update、enter、exit是D3比较重要的三个函数。
先上代码：

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
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>理解update-enter-exit三个函数的用法</title>
</head>
<body>
	<p>Apple</p>
	<p>Pen</p>
	<p>AppelPen</p>

	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
		// 选择集
		var body = d3.select("body");
		// 数据绑定
		var dataset = [30, 40, 50, 60, 70];

		var p = body.selectAll("p");

		var update = p.data(dataset);

		var enter = update.enter();

		var exit = update.exit();

		console.log(update);

		console.log(enter);

		console.log(exit);

	</script>
</body>
</html>

在HTML文档中定义了三个P元素，以便后面D3数据的绑定。再用D3选择所有的P元素，用的是selectAll()函数。
再使用data函数选择数据，选择的部分就是update。enter和exit都是update的部分。
update就是已经绑定了的元素部分。用console.log(update); 输出，我们可以看到三个p元素分别绑定了30，40，50三个数。
所以我理解的update就是数据和元素共同绑定的部分。
比如说你有你有5株多肉植物，我只有三个花盆，那我们现在可以种三盆植物，这三盆呢就是update部分啦。

这里写图片描述

我再看看console.log(enter); enter输出的是什么：

这里写图片描述

enter部分输出的就是update部分没有绑定的剩下的两个数据，因为这里它没有元素可以绑定，所以就是木有绑定的元素的内容。

就是我剩下的那两株没有盆的多肉。

exit输出的是当数据量比元素个数要小的时候，才会有内容，我们把刚刚的程序的数组长度变为2，var dataset = [30, 40];
这个时候我再来看看输出的是什么：

这里写图片描述

我们看到这里输出了一个多余的P元素，因为它没有数据绑定，所以出现在了这里。比如说你有你有3株多肉植物，我有5个花盆，那么两个多余的盆就会出现在exit里
面。
这三个部分在很多程序中的处理方法都是有很多模式可寻的。
我们现在在把数据更改为5个。var dataset = [30, 40, 50, 60, 70];
我们把有数据绑定的部分的内容更改为数据的本身

1
2
3
4
var update = p.data(dataset)
		.text(function(d) {
			return d;
		});

它的输出就变成了数据本身
这里写图片描述
对于enter部分，有数据没有元素与之绑定，我们就要添加元素

1
2
3
4
5
var enter = update.enter()
			.append("p")
			.text(function(d) {
				return d;
			});

我们看到输出了所有data数据，可是我们明明只有三个P元素啊，那剩下两个数据是怎么出来的呢

这里写图片描述

我们在打开调试模式检查一下网页的元素，我们看到下面添加了两个p段落，这两个段落就是通过enter添加的。

这里写图片描述

对于数据量比较少的时候，多余的元素通常是没有用的，所以他的处理手法是remove() ,

1
2
var exit = update.exit()
			.remove();

我们再把数据改成两个
现在再刷新页面就只有两个P段落了

这里写图片描述

到这里大概就滤清这三个函数的用法了。
最后贴上完整的代码。看一遍没用，试一下才知道！

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>理解update-enter-exit三个函数的用法</title>
</head>
<body>
	<p>Apple</p>
	<p>Pen</p>
	<p>AppelPen</p>

	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
		// 选择集
		var body = d3.select("body");
		// 数据绑定
		var dataset = [30, 40, 50, 60, 70]; //根据需要选择数据的长短
		// var dataset = [30, 40];

		var p = body.selectAll("p");

		var update = p.data(dataset)
					.text(function(d) {
						return d;
					});

		var enter = update.enter()
					.append("p")
					.text(function(d) {
						return d;
					});

		var exit = update.exit()
					.remove();

		console.log(update);

		console.log(enter);

		console.log(exit);

	</script>
</body>
</html>