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

  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 来表示各自的部分,上面的代码的结果为:

           
    结果图可以看到新添加的元素 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. });

结果图为:

    
    可以看到,调用 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.js 入门系列 — 11 】 入门总结

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Codeforces Round #370 (Div. 2) E. Memory and Casinos (数学&&概率&&线段树)

    题目链接: http://codeforces.com/contest/712/problem/E 题目大意: 一条直线上有n格,在第i格有pi的可能性向右走一格,1-pi的可能性向左走一格,有2中操 ...

  2. python学习09——字典(3)

    今天写了一道python字典题目,用了上次字典(2)中的方法,代码如下: json = {', 'IP':'10.0.0.1'} def find_value(themap, word): if wo ...

  3. jQuery判断网页中的id是否有重复的

    From:http://blog.csdn.net/china_skag/article/details/6915323判断网页中的ID是否有重复的:指定ID判断 $(function(){ $(&q ...

  4. java nio 与io区别

    转自:http://blog.csdn.net/keda8997110/article/details/19549493 当学习了Java NIO和IO的API后,一个问题马上涌入脑海: 我应该何时使 ...

  5. 【转】修改LINUX时间

    命令格式为: date -s 时间字符串 例如只修改系统的日期,不修改时间(时分秒) date -s 2012-08-02 或只修改时间不修改日期 date -s 10:08:00 当然也可以同时修改 ...

  6. 不使用ASP.NET中的服务器控件将如何上传文件?

    遇到文件的上传时,可能会有大部分的开发者喜欢使用服务器控件,虽然很方便,但是却不能很好的控制,不具灵活性. 现给出例子,使用html标签语言灵活的控制文件的上传. 1.html部分 <input ...

  7. 关于lwip移植到ucsos-ii平台的遇到的问题(一)

    移植的步骤参照<Day_Day_Up笔记之uCOS-II_LwIP_在_STM32F107_上移植>,<uCOS平台下的LwIP移植笔记>,<嵌入式网络那些事>. ...

  8. 项目组J2ee程序员的标志,你中招没 转载+评论

    原文在此 校园级别的程序员的标志: 代码中最多的是嵌套if(null == xxx),还要告诉你,null必须写在前面,我靠. 防止把==写成=,c语言时代常犯的错误.由于null不能做左值,在写=的 ...

  9. 涵涵和爸爸习惯养成进度表(一)(May 5 - May 25)

    规则说明 三周时间(21天)内,没有哭脸,不超过三个无表情脸,可以给一个奖励(动画书等) 涵涵违反规则,在爸爸和妈妈都同意的情况下,可以给无表情脸 爸爸违反规则,在妈妈和涵涵都同意的情况下,可以给无表 ...

  10. Windows Phone开发需要了解的背景

    在Windows Phone8.1之前,Windows Phone应用是基于Silverlight的,这些代码也不能在Windows上运行,从Windows Phone8.1开始,开发者多了一个选择, ...