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

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

新老客户大回馈,云服务器低至5折

上一节给大家讲述额绑定数据的原理。当数组的长度与元素的数量不一致时,有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元素。内容分别为
<p>3</p>
<p>6</p>
<p>9</p>
 
但是在我们开发过程中,从后端服务器读取数据后,网页中是没有与之对应的元素的。因此,有一个很常见的用法 :
选择一个空集,然后使用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元素的内容。需要的时候,可以继续更改样式等。最终,网页中的元素结构为 :
<p>100</p>
<p>200</p>
<p>300</p>
<p>400</p>
<p>500</p>
 
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元素都有数据与之对应。最终,网页中的元素结构为 :
<p>100</p>
<p>200</p>
<p>300</p>

 

处理模板 :
经过学习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()

 

如此,则不需要考虑网页中P元素是多以还是不足。无论是哪种情况,最终的结果必定是一个P元素对应数组中一个项,没有多余的。上面的模式,就是为模板。在数据需要经常更新时很常用。

 

 
 

原文链接:https://www.cnblogs.com/littleSpill/p/10786793.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:java 常用类

下一篇:原生JS实现随机点名项目