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 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
Javascript valueOf 使用方法
Dec 28 Javascript
javascript demo 基本技巧
Dec 18 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
Vue.js实现表格渲染的方法
Sep 07 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
PHP5中MVC结构学习
2006/10/09 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP如何实现跨域
2016/05/30 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Numpy的简单用法小结
2019/08/28 Python
wxPython色环电阻计算器
2019/11/18 Python
python matplotlib拟合直线的实现
2019/11/19 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python爬虫要用到的库总结
2020/07/28 Python
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
迟到检讨书900字
2014/01/14 职场文书
年终奖发放方案
2014/06/02 职场文书
杭白菊导游词
2015/02/10 职场文书
创业计划书之个人工作室
2019/08/22 职场文书