【 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中,选择 ...
随机推荐
- Java对象的XML序列化(转)
转自:http://westlifesz.javaeye.com/blog/48618 java.io.Serializable引发的问题——什么是序列化?在什么情况下将类序列化? 序列化就是一种用 ...
- 2D几何变换
2D点:非齐次坐标x(x,y) (x表示向量矢量) 齐次坐标:x~=(x~,y~,w~)=w~(x,y,1)=w~x~ 增广矢量:x—=(x,y,1) w~=0时,齐次点称作理想点或无 ...
- 第3.3 案例2: 工作队列 job queue
第2个案例就是工作队列,典型的点对点的消息,一个Producer发送一个工作消息到队列去,具有Listener类的Consumer能够从工作队列中获得一个工作情况的消息,这个消息被这个消费者消费掉之后 ...
- PCA and kmeans MATLAB实现
MATLAB基础知识 l Imread: 读取图片信息: l axis:轴缩放:axis([xmin xmax ymin ymax zmin zmax cmin cmax]) 设置 x.y 和 ...
- TextWatcher 编辑框监听器
TextWatcher tw = new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int sta ...
- mybatis学习2
解决字段名与实体类属性名不相同的冲突 1. 准备表和数据:CREATE TABLE orders(order_id INT PRIMARY KEY AUTO_INCREMENT,order_no VA ...
- android layout_weight讲解
Layout_weight是线性布局,也就是LinearLayout里面用到的,下面通过实验来看这个Layout_weight的特性. 1.当控件的属性android:layout_width=&qu ...
- maven 配置
四.eclipse配置maven eclipse---window---maven------User Settings: 之前设置的仓库的位置: 五.idea15配置maven idea14---s ...
- OpenCV阶段总结扩充。
Mat类型简单介绍 /* cv::Mat类是用于保存图像以及其他矩阵的数据结构.默认情况下,其尺寸为0,我们也可以设置其初始尺寸,比如定义一个Mat类的对象,就要写cv::Mat pic(320,64 ...
- BZOJ 1096 仓库建设
和上题类似吧.... #include<iostream> #include<cstdio> #include<cstring> #include<algor ...