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

  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. petset翻译

      Terminology     通过这个文档,你将会看到一些术语,有时候他们在别的地方交叉使用,这可能会引起一些困惑.这一节的 是帮助你理清楚他们. Node: 一个简单的虚拟或物理机在你的一个k ...

  2. iframe用法总结

    <iframe>是框架的一种形式,也比较常用到. 例子1. <iframe width=420 height=330 frameborder=0 scrolling=auto src ...

  3. java中的反射机制在Android开发中的用处

    JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反 ...

  4. JSOI2016R3 瞎BB题解

    题意请看absi大爷的blog http://absi2011.is-programmer.com/posts/200920.html http://absi2011.is-programmer.co ...

  5. The Managed Metadata Service or Connection is currently not available 分类： Sharepoint 2015-07-09 13:28 5人阅读 评论(0) 收藏

    Does the following error message looks familiar to you? (When you go to Site Actions –> Site Sett ...

  6. 场景4 Data Warehouse Management 数据仓库

    场景4 Data Warehouse Management 数据仓库 parallel 4 100% —> 必须获得指定的4个并行度,如果获得的进程个数小于设置的并行度个数,则操作失败 para ...

  7. as3延迟处理

    查找关键字“flashplayer 弹性跑道” 每当一帧即将走完,FlashPlayer就要做些总结性工作(一次性地汇总变化),把这一帧当中发生的变化拿出来展示(渲染)一下. 如果它处理的事情少,工作 ...

  8. 与焊接厂交流——从生产角度出发的PCB设计心得

    上周的时候,去了趟加工厂盯电路板的焊接进度.然后在闲余的时候,跟焊接厂的工程师交流了一下,工程师从生产的角度,说了几个值得注意的事项: 1.元件的焊盘应该要窄长,不能过宽.因为,在过机表贴时,焊盘上的 ...

  9. STM32——外部中断EXIT实现

    外部中断实现步骤: 一.初始化,包括:1.AFIO时钟中断和GPIO时钟使能:                          2.GPIO初始化                           ...

  10. 【转】Matlab练习程序（各向异性扩散）

    http://www.cnblogs.com/tiandsp/archive/2013/04/18/3029468.html 主要是用来平滑图像的,克服了高斯模糊的缺陷,各向异性扩散在平滑图像时是保留 ...