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』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
js实现微信聊天效果
Aug 09 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
给初学PHP的5个入手程序
2006/11/23 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python 字段拆分详解
2019/12/17 Python
如何基于python操作json文件获取内容
2019/12/24 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
超市5.1促销活动
2014/01/15 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
民事二审代理词
2015/05/25 职场文书
企业党建工作总结2015
2015/05/26 职场文书
高一语文教学反思
2016/02/16 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript