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

  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. IOS开发 - TextField 控件详细

    //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, ...

  2. 关于lambda表达式的一些学习——基于谓词筛选值序列

    今天看了一些关于lambda表达式的知识,然后对于Func<T,TResult>泛型委托不太熟悉,便查了查相关资料,又引出来了基于谓词筛选值序列这个对我来说的新鲜知识点,于是去查MSDN, ...

  3. [转]as3 算法实例【输出1 到最大的N 位数 题目：输入数字n，按顺序输出从1 最大的n 位10 进制数。比如输入3，则输出1、2、3 一直到最大的3 位数即999。】

    思路:如果我们在数字前面补0的话,就会发现n位所有10进制数其实就是n个从0到9的全排列.也就是说,我们把数字的每一位都从0到9排列一遍,就得到了所有的10进制数. /** *ch 存放数字 *n n ...

  4. hibernate开发(2)

    1 hibernate 的缓存机制 在程序运行中,hibernate要不断访问物理数据库,为了降低访问频率,提升性能,会复制一部分数据到缓存中,使得hibernate可以从缓存中读写数据,然后在特定时 ...

  5. I had lots of shrapnel in my leg

    People were running up to us, and screaming and hitting us, and throwing stones and eggs. "They ...

  6. Power of Four（Difficulty: Easy）

    题目: Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example ...

  7. Go语言http包Form解析之坑

    最近正在用Go语言做一个项目,今天在用http包读取客户端发过来的POST数据时遇到了一点小麻烦,就下面这段代码,死活读不到数据: { var body []byte nRead, err := r. ...

  8. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  9. 布局容器layout Container

    画布canvas 盒子Box VBox Hbox-->HGroup VGroup 控制条 ControlBar

  10. SWFUpload - JQuery上传插件

    首先,大家可以去SWF的官网下载相关Demo或者源码. 官方地址:http://code.google.com/p/swfupload/ 官方Demo:http://demo.swfupload.or ...