D3.js的基础部分之选择集的处理 enter和exit的处理方法 (v3版本)

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

enter的处理方法 :

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

 render() {
         return (
             <div id="body" >
                 <p></p>
             </div>
         );
     }

 var dataList = [3,6,9]
         // 选择id为body的容器内的所有的p元素，将选择集结果赋值给变量p
         var p = d3.select("#body")
                 .selectAll("p")

         //绑定数据后，分别获取update和enter部分。
         var update = p.data(dataList);
         var enter = update.enter();

         //update部分的处理方法是直接修改内容
         update.text(function(d){
             return d
         })

         //enter部分的处理方法是添加元素后再修改内容
         enter.append("p")
             .text(function(d){
                 return d
             })

这个例子中，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元素，请看代码 :

 

  render() {
         return (
             <div id="body" >

             </div>
         );
     }

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

上述代码中，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元素。

 

  render() {
         return (
             <div id="body" >
                 <p></p>
                 <p></p>
                 <p></p>
                 <p></p>
                 <p></p>
             </div>
         );
     }

 var dataList = [100,200,300];
         var p = d3.select("#body")
                 .selectAll("p")

         //绑定数据后，分别获取update部分和exit部分
         var update = p.data(dataList);
         var exit = update.exit();

         //update部分的处理方法是修改内容
         update.text(function(d){
             return d
         })

         //exit部分的处理方法是删除
         exit.remove()

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

<p>100</p>

<p>200</p>

<p>300</p>

处理模板 ：

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

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

  var dataList = [100,200.300];
         var p = d3.select("#body")
                 .selectAll("p")

         //绑定数据后，分别返回update、enter、exit部分
         var update = p.data(dataList);
         var enter = update.enter();
         var exit = update.exit();

         //update部分的处理方法
         update.text(function(d){
             return d
         })

         // enter部分的处理方法
         enter.append("p")
             .text(function(d){
                 return d
             })

         // exit部分的处理方法
         exit.remove()

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