【 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中,选择 ...
随机推荐
- asp.net自己创建的app_code文件夹中的类不能访问的解决办法
在Web应用程序中不能通过右键项目-〉”添加“-〉”添加ASP.NET文件夹“方式添加 .因为Web应用程序中App_Code就不存在 .不过可以通过手动的方式创建,添加一个文件夹命名为App_Cod ...
- 锤子手机 Smartisan M1L 咖啡金 真皮背面 高配版 5.7
http://www.smartisan.com/m1/#/os 快人一步的OS http://www.smartisan.com/shop/#/buyphone?c=coffee&v= ...
- mac 端口被占用及kill端口
在本地部署 Web 应用时我有遇到过某网络端口已经被其他程序占用的情况,这时候就需要先退出占用该端口的进程,我们可以通过“终端”来实现结束占用某特定端口的进程 1.打开终端,使用如下命令: lsof ...
- php防止外链导出的代码
先收藏起来再说! URL跳转代码 1.代码: <? $url=$_GET["url"];header("Location:"."http://& ...
- CSS兼容问题实用建议
CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTE ...
- C++用法的学习心得（要求包含示例，并反映出利用网络获取帮助的过程）
大一一年C++的学习生涯,让我感慨颇多!回想起,当初上课时的情形,一切是那么的清晰,仿佛就像是发生在昨天一样. 任何一门学科的学习都是有技巧的.对于c++,我学的并不好,刚开 ...
- 008-Scala主构造器、私有构造器、构造器重载实战详解
008-Scala主构造器.私有构造器.构造器重载实战详解 Scala主构造器实战 无参数的主构造器 分析 1.name 需要赋初值,一般通过占位符来代表空值 2.private 声明私有的age 生 ...
- AngularJs的UI组件ui-Bootstrap分享（九）——Alert
alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...
- 网卡故障：弹出界面eth0: 错误：没有找到合适的设备：没有找到可用于链接System eth0 的
原文地址:http://www.mamicode.com/info-detail-112000.html 报错截图如下: 排错步骤如下: 1:查看系统是否识别相应网卡(发现没有eth0网卡存在): 根 ...
- TypeScript Handbook 2——接口1（翻译）
接口(Interfaces) One of TypeScript's core principles is that type-checking focuses on the 'shape' that ...