【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
在前面几节中反复出现了如下代码：
- svg.selectAll("rect")
- .data(dataset)
- .enter()
- .append("rect")
当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候，通常会用到以上代码，这一节就详细说说当被选择元素和数据数量不一致时该如何处理。
这一节将涉及到三个函数。
1. update() 当对应的元素正好满足时 （ 绑定数据数量 = 对应元素 ）
实际上并不存在这样一个函数，只是为了要与之后的 enter 和 exit 一起说明才想象有这样一个函数。但对应元素正好满足时，直接操作即可，后面直接跟 text ，style 等操作即可。
2. enter() 当对应的元素不足时 （ 绑定数据数量 > 对应元素 ）
当对应的元素不足时，通常要添加元素，使之与绑定数据的数量相等。后面通常先跟 append 操作。
3. exit() 当对应的元素过多时 （ 绑定数据数量 < 对应元素 ）
当对应的元素过多时，通常要删除元素，使之与绑定数据的数量相等。后面通常要跟 remove 操作。
下面看看具体的用法：
- <body>
- <p>AAAAAAAAA</p>
- <p>BBBBBBBBB</p>
- <p>CCCCCCCCC</p>
- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
- <script>
- var dataset = [ 10 , 20 , 30 , 40 , 50 ];
- var update = d3.select("body").selectAll("p").data(dataset);
- var enter = update;
- update.text(function(d,i){
- return "update " + d;
- });
- enter.enter()
- .append("p")
- .text(function(d,i){
- return "enter " + d;
- });
- </script>
- </body>
上面的代码分别用了变量名 update 和 enter 来表示各自的部分，上面的代码的结果为：
- var dataset = [ 10 , 20 ];
- var update = d3.select("body").selectAll("p").data(dataset);
- var exit = update;
- update.text(function(d,i){
- return "update " + d;
- });
- exit.exit()
- .text(function(d,i){
- return "exit";
- });
结果图为：
- exit.exit()
- .remove();
尤其以 enter 函数的使用最为多见。因为通常用 D3 做数据可视化时，我们都拥有需要的数据，而且数据量巨大，文档中很少有足够数量的与之对应的元素。所以要特别熟练 enter 的使用方法
本文来自：
博客为： www.ourd3js.com
csdn博客为： blog.csdn.net/lzhlzz
【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用的更多相关文章
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
- 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...
- 【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
- 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...
随机推荐
- 正则匹配中文 UTF-8 & GBK
在php 中: //GB2312汉字字母数字下划线正则表达式 GBK: preg_match("/^[".chr(0xa1)."-".chr(0xff).&qu ...
- java.lang.UnsupportedClassVersionError出错
代码出错如下:java.lang.UnsupportedClassVersionError: cn/itcast/mybatis/first/MybatisFirst : Unsupported ma ...
- javamail 发送附件
1.属性文件 mail.protocol=smtpmail.host=mail.port=mail.auth=truemail.timeout=25000mail.username=mail.pass ...
- 学习Excel 十大函数
云课堂视频教程 笔记总结: URL:http://study.163.com/course/courseLearn.htm?courseId=1009026#/learn/video?lessonId ...
- CALayer笔记
1.Core Animation是跨平台的,支持IOS和Mac OS X环境 2.核心动画操作的对象不是UIView而是CALayer,CALayer是核心动画的基础, 可以做圆角.阴影.边框等效果 ...
- Go语言http包Form解析之坑
最近正在用Go语言做一个项目,今天在用http包读取客户端发过来的POST数据时遇到了一点小麻烦,就下面这段代码,死活读不到数据: { var body []byte nRead, err := r. ...
- iOS7下隐藏status bar的详细研究
info.plist文件中,View controller-based status bar appearance项设为YES,则View controller对status bar的设置优先级高于a ...
- hdu4067
//Accepted 1812 KB 514 ms /* source:hdu4067 time :20150816 by :songt */ /*题解:网络流 首先我们贪心建图:对于u到v的一条边, ...
- C语言程序设计第11次作业
一.本次课主要内容: 本章主要介绍指针相关的基础知识,本节课的主要如下 (1)通过示例"密码开锁"引入指针的概念和主要知识点,分析了密码开锁的过程来说明变量.内存单元和地址之间的关 ...
- macbook air 128g 磁盘清理
使用 du 命令发现 ~/Library/Developer/Xcode/DerivedData 占用了大量空间,这些都是xcode对以前建过的project源码文件建立的索引等,如果不需要可以都删 ...