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

时间：2021-08-23 23:10:16

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

  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 操作。

下面看看具体的用法：

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

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

           【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
    结果图可以看到新添加的元素 enter 的部分。
 
    改一部分代码，看看怎么用 exit 。
  1. var dataset = [ 10 , 20 ];
  2. var update = d3.select("body").selectAll("p").data(dataset);
  3. var exit  = update;
  4. update.text(function(d,i){
  5. return "update " + d;
  6. });
  7. exit.exit()
  8. .text(function(d,i){
  9. return "exit";
  10. });

结果图为：

    【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
    可以看到，调用 exit() 函数后，实际上是返回没有对应数据的元素。通常我们可以删除掉多余的元素，如：
  1. exit.exit()
  2. .remove();
 

尤其以 enter 函数的使用最为多见。因为通常用 D3 做数据可视化时，我们都拥有需要的数据，而且数据量巨大，文档中很少有足够数量的与之对应的元素。所以要特别熟练 enter 的使用方法

本文来自：

博客为： www.ourd3js.com

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

【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用的更多相关文章

  1. 【 D3&period;js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  2. 【 D3&period;js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  3. 【 D3&period;js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  4. 【 D3&period;js 入门系列 --- 2&period;1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  5. 【 D3&period;js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  6. 【 D3&period;js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  7. 【 D3&period;js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  8. 【 D3&period;js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  9. 【 D3&period;js 入门系列 --- 2&period;1 】 关于怎样选择，插入，删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...

随机推荐

  1. &ast;&ast;&ast;PHP中error&lowbar;reporting&lpar;&rpar;用法详解&lpar;含codeigniter框架中屏蔽错误提示的解决方案&rpar;

    php中我们对错误的处理会常用到error_reporting函数了,大家可以看到最多的是error_reporting(E_ALL ^ E_NOTICE)了,这个到底什么意思呢,下面我来来看看. e ...

  2. 语句：分支语句、switch case ——7月22日

    语句的类型包括:声明语句.表达式语句.选择语句.循环语句.跳转语句.异常语句 1．声明语句引:入新的变量或常量. 变量声明可以选择为变量赋值. 在常量声明中必须赋值. 例如: int i = 0;// ...

  3. &num; 20145210 《Java程序设计》第02周学习总结

    教材学习内容总结 本周我对教材第三章进行了学习,第三章对Java语言的语句.语法.类型.变量的定义等内容进行了比较详细的说明,相比之前的第一章和第二章,我觉得这一章还是比较好理解的,比较容易被接受.J ...

  4. &lbrack;转载&rsqb;iOS面试题总

    转载自:http://blog.sina.com.cn/s/blog_67eb608b0101r6xb.html (2014-06-13 20:23:33) 转载▼ 标签: 转载   crash 原文 ...

  5. hdu 3038 How Many Answers Are Wrong（种类并查集）2009 Multi-University Training Contest 13

    了解了种类并查集,同时还知道了一个小技巧,这道题就比较容易了. 其实这是我碰到的第一道种类并查集,实在不会,只好看着别人的代码写.最后半懂不懂的写完了.然后又和别人的代码进行比较,还是不懂,但还是交了 ...

  6. List&lt&semi;T&gt&semi;转换为ObservableCollection&lt&semi;T&gt&semi;

    ObservableCollection能通知他变化了也正是因为它实现了INotifyPropertyChanged接口, 在wpf项目中经常会遇到把List<T>转换为Observabl ...

  7. react学习一篇就够了

    webstrom自动格式化代码 命令 js框架 MVC 安装 npm install create-react-app -g 生成项目(项目名npm发包包命名规范 /^[a-z0-9_-]$/) cr ...

  8. 为什么我们要使用int类型来保存时间类型的数据。

    1.如果数据保存的是timestamp类型那么,如果某个服务器系统时区配置错误,那么悲剧的是通过该服务器写入的时间都是有偏差的.  如果使用int类型保存unix时间戳的话,那么就是在前端展示的时候转 ...

  9. Centos7下部署两套python版本并存环境的操作记录

    需求说明:centos7.2系统的开发机器上已经自带了python2.7版本,但是开发的项目中用的是python3.5版本,为了保证Centos系统的正常运行,以及节省机器资源(不想因此再申请另外一台 ...

  10. CSS页面重构&OpenCurlyDoubleQuote;鑫三无准则”之&OpenCurlyDoubleQuote;无图片”准则——张鑫旭

    一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...

相关文章