【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
2015-01-27 22:04
411 查看
绑定数据之后,选择集分为三部分:update、enter、exit。这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板。
发表日期:2015 年 1 月 27 日
更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
1. enter的处理方法
如果没有足够的元素,那么处理方法通常是使用append()添加元素。请看下面的代码:<body> <p></p> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p"); //绑定数据后,分别获取update和enter部分 var update = p.data(dataset); var enter = update.enter(); //update部分的处理方法是直接修改内容 update.text( function(d){ return d; } ); //enter部分的处理方法是添加元素后再修改内容 enter.append("p") .text(function(d){ return d; }); </script> </body>本例中,body中的p元素只有一个,但是数据有三个,因此enter部分包含多余的两个数据。对多余数据的处理方法就是append元素,与之对应。经过处理后,body里有三个p元素,内容分别为:
<p>3</p> <p>6</p> <p>9</p>通常,从服务器读取文件后,数据是有的,但是网页中是没有元素的。这是D3一个很重要的特性,即可以选择一个空集,然后使用enter().append()的形式来插入元素。假设现在body里没有p元素,请看如下代码:
var dataset = [10,20,30,40,50]; var body = d3.select("body"); body.selectAll("p") //选择body中所有p,但由于没有p,所以选择了一个空集 .data(dataset) //绑定dataset数组 .enter() //返回enter部分 .append("p") //添加p元素 .text(function(d){ return d; });上述代码中,selectAll选择了一个空集,然后绑定了数据。由于选择集为空,那么data()返回的update部分为空。然后调用enter()和append(),使得每一个数据都有元素p与之对应。最后再更改p元素的内容。即enter部分的常见处理方法是使用append()添加元素。
2. exit的处理方法
有多出的元素,没有数据与之对应。对于这样的元素,通常的做法是使用remove()删除元素。假设body中有5个p元素,请看如下代码:var dataset = [10, 20, 30]; var p = d3.select("body").selectAll("p"); //绑定数据之后,分别获取update部分和exit部分 var update = p.data(dataset); var exit = update.exit(); //update的部分的处理方法是修改内容 update.text( function(d){ return d; } ); //exit部分的处理方法是删除 exit.remove();这段代码中,对于exit部分的处理方法是删除。删除之后,网页中将不会有多余的p元素。
3. 处理模板
经过上两节的内容,知道了如何处理多余的数据和元素。但是,有时候我们不知道是数据多,还是元素多,或者允许用户决定谁多谁少。对于事前不知道数组长度或元素数量的问题,可定义一套处理的模板。请看如下代码:var dataset = [10, 20, 30]; var p = d3.select("body").selectAll("p"); //绑定数据后,分别返回update、enter、exit部分 var update = p.data(dataset); var enter = update.enter(); var exit = update.exit(); //1.update部分的处理方法 update.text( function(d){ return d; } ); //2.enter部分的处理方法 enter.append("p") .text( function(d){ return d; } ); //3.exit部分的处理方法 exit.remove();如此,则不需要考虑网页中是否有足够的p元素,或者有多余的p元素,无论是何种情况,最终的结果必定是一个p元素对应数组中的一个项,没有多余的。这种方法,可称为有一套处理的模板,在数据需要经常更新时很常用。谢谢阅读。下一篇文章将会讲述如何应用该模板。
文档信息
版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)发表日期:2015 年 1 月 27 日
更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
相关文章推荐
- 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
- 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
- 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
- 详解keil采用C语言模块化编程时全局变量、结构体的定义、声明以及头文件包含的处理方法!
- hadoop常见错误以及处理方法详解
- Extjs4.2 表格动态数据加载,以及动态选择分页条目,前后台详解
- javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
- ZK框架简介,以及在ZK下使用JXL读取Excel模板,导出数据模型到Excel的方法
- GridView中的数据导出到Excel方法(包含处理模板列)
- javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
- 详解AngularJS中$http缓存以及处理多个$http请求的方法
- hadoop常见错误以及处理方法详解
- 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
- D3.js中data(), enter() 和 exit()的问题详解
- GridView中的数据导出到Excel方法(包含处理模板列)
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
- 详解Excel互操作中处理数据的几个方法(上:读取数据)
- JS中Json数据的处理和解析JSON数据的方法详解
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据