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

时间  2019-11-08
标签 d3.js 入门 系列 理解 update enter exit 使用 栏目 JavaScript 繁體版
原文   原文链接

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

 

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

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

 

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

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

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

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

    当对应的元素不足时，一般要添加元素，使之与绑定数据的数量相等。后面一般先跟 append 操做。.net

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

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

 

    下面看看具体的用法：utf-8

 

[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 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程