D3.js 入门系列 --- 7 理解 update, enter, exit 的使用

Posted 冷雨恋晴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了 D3.js 入门系列 --- 7 理解 update, enter, exit 的使用相关的知识，希望对你有一定的参考价值。

   在前面几节中反复出现了如下代码：

 

[javascript] view plain copy
 
  1. svg.selectAll("rect")    
  2.           .data(dataset)    
  3.           .enter()    
  4.           .append("rect")   

    当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候，通常会用到以上代码，这一节就详细说说当被选择元素和数据数量不一致时该如何处理。

 

    这一节将涉及到三个函数。

1. update()    当对应的元素正好满足时 （ 绑定数据数量 = 对应元素 ）

    实际上并不存在这样一个函数，只是为了要与之后的 enter 和 exit 一起说明才想象有这样一个函数。但对应元素正好满足时，直接操作即可，后面直接跟 text ，style 等操作即可。

2. enter()    当对应的元素不足时 （ 绑定数据数量 > 对应元素 ）

    当对应的元素不足时，通常要添加元素，使之与绑定数据的数量相等。后面通常先跟 append 操作。

3. exit()     当对应的元素过多时 （ 绑定数据数量 < 对应元素 ）

    当对应的元素过多时，通常要删除元素，使之与绑定数据的数量相等。后面通常要跟 remove 操作。

 

    下面看看具体的用法：

 

[javascript] view plain copy
 
  1. <body>  
  2.         <p>AAAAAAAAA</p>  
  3.         <p>BBBBBBBBB</p>  
  4.         <p>CCCCCCCCC</p>  
  5.           
  6. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>    
  7. <script>  
  8.           
  9.         var dataset = [ 10 , 20 , 30 , 40 , 50 ];  
  10.   
  11.         var update = d3.select("body").selectAll("p").data(dataset);  
  12.         var enter  = update;  
  13.           
  14.         update.text(function(d,i){  
  15.                 return "update " + d;  
  16.             });  
  17.           
  18.         enter.enter()  
  19.              .append("p")  
  20.              .text(function(d,i){  
  21.                 return "enter " + d;  
  22.             });  
  23.             
  24. </script>    
  25. </body>  

    上面的代码分别用了变量名 update 和 enter 来表示各自的部分，上面的代码的结果为：

 

 

           技术分享
    结果图可以看到新添加的元素 enter 的部分。
 
    改一部分代码，看看怎么用 exit 。
[javascript] view plain copy
 
  1. var dataset = [ 10 , 20 ];  
  2.   
  3. var update = d3.select("body").selectAll("p").data(dataset);  
  4. var exit  = update;  
  5.   
  6. update.text(function(d,i){  
  7.         return "update " + d;  
  8.     });  
  9.   
  10. exit.exit()  
  11.      .text(function(d,i){  
  12.         return "exit";  
  13.     });  
    结果图为：
    技术分享
    可以看到，调用 exit() 函数后，实际上是返回没有对应数据的元素。通常我们可以删除掉多余的元素，如：
[javascript] view plain copy
 
  1. exit.exit()  
  2.     .remove();  
 
    尤其以 enter 函数的使用最为多见。因为通常用 D3 做数据可视化时，我们都拥有需要的数据，而且数据量巨大，文档中很少有足够数量的与之对应的元素。所以要特别熟练 enter 的使用方法

 

 

本文来自：

博客为： www.ourd3js.com 

    csdn博客为： blog.csdn.net/lzhlzz 

以上是关于 D3.js 入门系列 --- 7 理解 update, enter, exit 的使用的主要内容，如果未能解决你的问题，请参考以下文章

D3.js 入门系列 — 11 入门总结

D3.js 入门系列 --- 8 对话操作（事件）

D3.js 入门系列 --- 1 第一个程序HelloWorld

D3.js 入门系列 --- 1 第一个程序HelloWorld

D3.js 入门系列 --- 2.1 关于怎样选择，插入，删除元素

D3.js 入门系列 --- 2.1 关于如何选择，插入，删除元素