【 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中,选择 ...
随机推荐
- IHttpHandler防止图片链接被盗用
public class JpegHandler : IHttpHandler { public bool IsReusable { get { return true; } } public voi ...
- SQL疑难问题
最近,遇到并解决一个SQL上的疑难问题.考勤系统,记录着员工进出公司的刷卡记录.而员工刷卡并不规范,存在刷多次的情况.例如:出去时连续刷多次,进来时也连续刷多次.筛选有效刷卡记录数据的规则:对于出去时 ...
- Android中的Context
Context用来访问全局信息的接口,比如影城程序的资源.一些常用的组件都是继承自Context,目的就是方便的访问资源,比如Activity, Service.... 从Context访问本组件的资 ...
- Calculator(1.5)
Calculator(1.5) Github链接 ps.负数的处理未完成 解题过程中遇到的困难和解决 <stack>的使用: 认真研究了栈,基本上掌握了用法,与<queue>的 ...
- android开发中的问题集锦（慢慢搬运...）
1, android 设置ExpandableListView 系统默认箭头到右边 if(android.os.Build.VERSION.SDK_INT < android.os.Build. ...
- 第十篇.bootstrap轮播
使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. <div id="carous ...
- ASP.NET后台调用前台JS函数的三种常见方法
第一种:使用普通的添加控件中的Attributes属性进行调用 例如,像一般的普通的按钮:Button1.Attributes.Add("onclick","MyFun( ...
- swift 命名,字符串
命名: let numberOfDogs = 6 +2; 字符串连接: let finishedMessage = username + "xx" + password; 字符串 ...
- class can not be find with platformType:1 step 1
使用第三方库的时候 (配合cocopods)混合使用一定要注意 为什么会出现这样的问题... 苦苦难为我半天时间 都有想打人的冲动 前天一切正常今天出来个这 原因很简单当使用cocopods的时候默认 ...
- 浅谈Android系统移植、Linux设备驱动
一.Android系统架构 第一层:Linux内核 包括驱动程序,管理内存.进程.电源等资源的程序 第二层:C/C++代码库 包括Linux的.so文件以及嵌入到APK程序中的NDK代码 第三层:An ...