【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update、enter、exit。这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板。

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元素对应数组中的一个项,没有多余的。这种方法,可称为有一套处理的模板,在数据需要经常更新时很常用。谢谢阅读。下一篇文章将会讲述如何应用该模板。

文档信息

时间: 2024-10-03 22:25:41

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板的相关文章

【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后,分别返回update.enter.exit部分 var update = selection.data(dataset); var enter = update.enter(); var exit = update.exit(); //1.update部分的处理方法 update.text( fun

【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update .enter.exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章. D3 最大的特色就是能够将数据绑定到DOM上.使用select或selectAll选择元素之后,被选择的元素上是没有数据的.数据绑定就是使被选择元素里包含有数据.与此相关的函数有两个: datum():将指

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推.也可以不按照此顺序进行绑定,这就要用到data()的第二个参数.这个参数是一个函数,称为键函数(key function). 要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序.请看以下代码: <body> <!-- 三个空

【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程 假设body中有三个段落元素p

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu

Storm集群安装详解

Storm集群安装详解 storm有两种操作模式: 本地模式和远程模式. 本地模式:你可以在你的本地机器上开发测试你的topology, 一切都在你的本地机器上模拟出来; 远端模式:你提交的topology会在一个集群的机器上执行. 本文以Twitter Storm官方Wiki为基础,详细描述如何快速搭建一个Storm集群,其中,项目实践中遇到的问题及经验总结,在相应章节以“注意事项”的形式给出. 1.   Strom集群组件 Storm集群中包含两类节点:主控节点(Master Node)和工

codis-3.2.8集群部署详解

codis-3.2.8集群部署详解 一.概要 Codis 是一个分布式 Redis 解决方案, 对于上层的应用来说, 连接到 Codis Proxy 和连接原生的 Redis Server 没有明显的区别 (不支持的命令列表https://github.com/CodisLabs/codis/blob/release3.1/doc/unsupported_cmds.md), 上层应用可以像使用单机的 Redis 一样使用, Codis 底层会处理请求的转发, 不停机的数据迁移等工作, 所有后边的

MariaDB(MySQL)创建、删除、选择及数据类型使用详解

一.MariaDB简介(MySQL简介略过) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL的代替品.在存储引擎方面,使用XtraDB(英语:XtraDB)来代替MySQL的InnoDB. MariaDB由MySQL的创始人Michael Widenius(英语:Michael Widenius)主导开发,他早前曾以10亿美元的价格,将自己创建的公司MySQL A

js对象浅拷贝和深拷贝详解

js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var