码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-01-27 23:37:59      阅读:385      评论:0      收藏:0      [点我收藏+]

标签:enter   exit   update   数据   模板   

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

文档信息

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

标签:enter   exit   update   数据   模板   

原文地址:http://blog.csdn.net/lzhlzz/article/details/43203621

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!