D3.js中data(), enter() 和 exit()的问题详解


Posted in Javascript onAugust 17, 2015

D3的应用非常广泛,现在成为了主流数据可视化工具之一。大家在刚接触使用d3.js的时候,感到最吃力的地方是data(), enter(), exit()这几个操作。

在我接触一段时间,有了一些了解之后,简单说说我的理解。

data()

先看一个例子:

<body>
 <p></p>
 <p></p>
 <p></p>
</body>

执行代码:

d3.select("body").selectAll("p").data([1, 2, 3])

这里,data()是用来绑定数据到选择的DOM元素上.这样以后,就可以针对这些数据做一些相关操作,比如设置元素宽度等。

从表面上,并不能看出什么变化。但在内部,它是在对应的DOM元素上添加了一个__data__属性,可以通过document.getElementsByTagName("p")[0].__data__看到。

enter()和exit()

这两个操作令人困惑是因为单从名字上看,很难推断出它们的作用。

在上面data()的例子中,我们的DOM元素和数据的个数是一样的。但如果不一样的话,我们该怎么办?

enter()和exit()就是用来处理这种情况的。

enter()

当DOM数量少于data的数量,或者压根一个都没有的时候,我们一般会希望让程序帮忙创建。

下面的例子,我们没有事先提供DOM元素:

<body>
</body>

仍旧执行:

d3.select("body").selectAll("p").data([1, 2, 3])

与上面例子不同的是,上面的例子中我们可以继续执行.style("width", "100px")等操作。但这里我们不能了,因为我们没有选择到DOM元素,需要先创建。

enter()是用来在绑定数据之后,选择缺少的那部分DOM元素。我们可能会疑惑,既然是缺少的部分,怎么选择呢?这里就需要我们发挥一点想象力,想象我们选择了一些不存在的东西。我们可以称之为“虚拟DOM”或“占位符(placeholder)”。

enter()只是进行选择,并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。

由此以来,我们使用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") 即可根据数据自动创建所需的DOM元素。

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()添加元素。

exit()

与enter()相反,exit()是用来选择那些与数据相比多出来的DOM元素。

在下面例子中,我们多提供了一个DOM元素:

<body>
 <p></p>
 <p></p>
 <p></p>
 <p></p>
</body>

这回就容易理解了,因为是多出来的,那么就是实际存在的,即最后一个<p>。

多出来的话,我们可以接着用.remove()移除这些元素,代码如下:

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

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元素。

参考资料

"Thinking with Joins" - by Mike Bostock

Javascript 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
关于js里的this关键字的理解
Aug 17 #Javascript
Nginx上传文件全部缓存解决方案
Aug 17 #Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 #Javascript
javascript中 try catch用法
Aug 16 #Javascript
javascript中undefined与null的区别
Aug 16 #Javascript
swtich/if...else的替代语句
Aug 16 #Javascript
javascript数组去重的六种方法汇总
Aug 16 #Javascript
You might like
linux下为php添加iconv模块的方法
2016/02/28 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
web前端开发也需要日志
2010/12/09 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
爱游人:Travelliker
2017/09/05 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
财务主管的岗位职责
2013/12/30 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
公安学专业求职信
2014/07/27 职场文书
党代会心得体会
2014/09/04 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
如何写好闭幕词
2019/04/02 职场文书