绑定数据之后，选择集分为三部分：update、enter、exit。这三部分的处理办法是什么呢？本文将讲解其处理方法，以及一个常用的处理模板。

1. enter的处理方法

如果没有足够的元素，那么处理方法通常是使用append()添加元素。请看下面的代码：

[javascript]view plain copy
    <body>  
        <p></p>  
        <script>  
        var dataset = [3, 6, 9];  
        var p = d3.select("body").selectAll("p");  
  
//绑定数据后，分别获取update和enter部分  
        var update = p.data(dataset);  
        var enter = update.enter();  
          
//update部分的处理方法是直接修改内容  
        update.text( function(d){ return d; } );  
  
//enter部分的处理方法是添加元素后再修改内容  
        enter.append("p")  
            .text(function(d){ return d; });  
        </script>  
    </body>  

本例中，body中的p元素只有一个，但是数据有三个，因此enter部分包含多余的两个数据。对多余数据的处理方法就是append元素，与之对应。经过处理后，body里有三个p元素，内容分别为：

[javascript]view plain copy
<p>3</p>  
<p>6</p>  
<p>9</p>  

通常，从服务器读取文件后，数据是有的，但是网页中是没有元素的。这是D3一个很重要的特性，即可以选择一个空集，然后使用enter().append()的形式来插入元素。假设现在body里没有p元素，请看如下代码：

[javascript]view plain copy
var dataset = [10,20,30,40,50];  
var body = d3.select("body");  
body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集  
    .data(dataset)      //绑定dataset数组  
    .enter()            //返回enter部分  
    .append("p")        //添加p元素  
    .text(function(d){ return d; });  

上述代码中，selectAll选择了一个空集，然后绑定了数据。由于选择集为空，那么data()返回的update部分为空。然后调用enter()和append()，使得每一个数据都有元素p与之对应。最后再更改p元素的内容。即enter部分的常见处理方法是使用append()添加元素。

2. exit的处理方法

有多出的元素，没有数据与之对应。对于这样的元素，通常的做法是使用remove()删除元素。假设body中有5个p元素，请看如下代码：

[javascript]view plain copy
var dataset = [10, 20, 30];  
    var p = d3.select("body").selectAll("p");  
  
//绑定数据之后，分别获取update部分和exit部分  
    var update = p.data(dataset);  
    var exit = update.exit();  
  
//update的部分的处理方法是修改内容  
    update.text( function(d){ return d; } );  
  
//exit部分的处理方法是删除  
    exit.remove();  

这段代码中，对于exit部分的处理方法是删除。删除之后，网页中将不会有多余的p元素。

3. 处理模板

经过上两节的内容，知道了如何处理多余的数据和元素。但是，有时候我们不知道是数据多，还是元素多，或者允许用户决定谁多谁少。对于事前不知道数组长度或元素数量的问题，可定义一套处理的模板。请看如下代码：

[javascript]view plain copy
var dataset = [10, 20, 30];  
var p = d3.select("body").selectAll("p");  
          
        //绑定数据后，分别返回update、enter、exit部分  
        var update = p.data(dataset);  
        var enter = update.enter();  
        var exit = update.exit();  
          
        //1.update部分的处理方法  
        update.text( function(d){ return d; } );  
          
        //2.enter部分的处理方法  
        enter.append("p")  
            .text( function(d){ return d; } );  
          
        //3.exit部分的处理方法  
        exit.remove();  

如此，则不需要考虑网页中是否有足够的p元素，或者有多余的p元素，无论是何种情况，最终的结果必定是一个p元素对应数组中的一个项，没有多余的。这种方法，可称为有一套处理的模板，在数据需要经常更新时很常用。

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

1. enter的处理方法

2. exit的处理方法

3. 处理模板

猜你喜欢