D3.js的基础部分之选择集的处理 enter和exit的处…

2019-04-30 23:39:59来源：博客园阅读 ()

上一节给大家讲述额绑定数据的原理。当数组的长度与元素的数量不一致时，有enter部分和exit部分，前者表示存在多余的数据，后者表示存在多余的元素。本节将给大家介绍如何处理这些多余的东西，最后会给大家讲解一个处理模板，此模板包含处理enter、exit、update部分的内容。

enter的处理方法 :

如果没有足够的元素，那么处理方法就是添加元素。请看代码 :

1 render() {
2         return (
3             <div id="body" >
4                 <p></p>
5             </div>
6         );
7     }

 1 var dataList = [3,6,9]
 2         // 选择id为body的容器内的所有的p元素，将选择集结果赋值给变量p
 3         var p = d3.select("#body")
 4                 .selectAll("p")
 5 
 6         //绑定数据后，分别获取update和enter部分。
 7         var update = p.data(dataList);
 8         var enter = update.enter();
 9 
10         //update部分的处理方法是直接修改内容
11         update.text(function(d){
12             return d
13         })
14 
15         //enter部分的处理方法是添加元素后再修改内容
16         enter.append("p")
17             .text(function(d){
18                 return d
19             })

这个例子中，id为body的div中的p元素只有一个，但是dataList中的数据有三个。因此，enter部分有多余的两个数据。

对于多余数据的处理方法就是添加元素(append),使其与多余数据对应。处理之后，d为body的div中有三个p元素。内容分别为

3

6

9

但是在我们开发过程中，从后端服务器读取数据后，网页中是没有与之对应的元素的。因此，有一个很常见的用法：

选择一个空集，然后使用enter().append()的形式来添加足够的数量的元素。例如，假设id为body的div里没有P元素，请看代码 :

1  render() {
2         return (
3             <div id="body" >
4                 
5             </div>
6         );
7     }

1  var dataList = [100,200,300,400,500]; //定义数组数据
2         var body = d3.select("#body") //选择id为body的容器赋值给变量body
3             body.selectAll("p")  //选择body中所有的p元素，但是没有p，因此说是我们选择了一个空集
4                 .data(dataList)  //绑定dataList数组
5                 .enter()    //返回enter部分
6                 .append("p")    //添加p元素
7                 .text(function(d){
8                     return d
9                 })

上述代码中，selectAll选择了一个空集，然后绑定数据。由于选择集为空，因此data()返回的update部分为空。然后调用enter()返回的enter部分，enter部分包含多余的五个数据。接下来向enter部分添加元素(append)，使得每一个数据都有元素p与之对应。最后，更改p元素的内容。需要的时候，可以继续更改样式等。最终，网页中的元素结构为 :

100

200

300

400

500

exit的处理方法 :

如果存在多余的元素，没有数据与之对应，那么就需要删除元素。使用remove()即可删除元素。请看下面示例。

假设id为body的div中的有5个p元素。

 1  render() {
 2         return (
 3             <div id="body" >
 4                 <p></p>
 5                 <p></p>
 6                 <p></p>
 7                 <p></p>
 8                 <p></p>
 9             </div>
10         );
11     }

 1 var dataList = [100,200,300];
 2         var p = d3.select("#body")
 3                 .selectAll("p")
 4 
 5         //绑定数据后，分别获取update部分和exit部分
 6         var update = p.data(dataList);
 7         var exit = update.exit();
 8 
 9         //update部分的处理方法是修改内容
10         update.text(function(d){
11             return d
12         })
13 
14         //exit部分的处理方法是删除
15         exit.remove()

这段代码中，对于exit部分的处理方法是删除。删除之后，网页中将不会有多余的p元素，剩下来的每一个p元素都有数据与之对应。最终，网页中的元素结构为 :

100

200

300

处理模板：

经过学习enter和exit的处理方法，我们知道了如何处理多余的数据和元素。但是，有时候我们在开发过程中不知道是数据多还是元素多，该怎么办？其实，我们大可不必在意数组长度和元素数量。大多数情况下，update部分都是"更新元素属性"。enter部分都是"添加元素并赋予初始属性"，exit部分都是"删除元素"。因此，无论数据和元素如何。其处理方法都是类似的。

因此，我们可归纳成一个处理模板，我们在开发过程中就不必理会数组长度和元素数量之间的关系。模板代码 :

 1  var dataList = [100,200.300];
 2         var p = d3.select("#body")
 3                 .selectAll("p")
 4 
 5         //绑定数据后，分别返回update、enter、exit部分
 6         var update = p.data(dataList);
 7         var enter = update.enter();
 8         var exit = update.exit();
 9 
10         //update部分的处理方法
11         update.text(function(d){
12             return d
13         })
14 
15         // enter部分的处理方法
16         enter.append("p")
17             .text(function(d){
18                 return d
19             })
20 
21         // exit部分的处理方法
22         exit.remove()