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

时间：2022-08-29 18:56:09

绑定数据之后，选择集分为三部分：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的处理方法以及处理模板的更多相关文章

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

    在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...

  2. 【 D3&period;js 选择集与数据详解 — 1 】 使用datum&lpar;&rpar;绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

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

    data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...

  4. 【 D3&period;js 选择集与数据详解 — 2 】 使用data&lpar;&rpar;绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  5. D3&period;js的基础部分之选择集的处理 enter和exit的处理方法 &lpar;v3版本&rpar;

    上一节给大家讲述额绑定数据的原理.当数组的长度与元素的数量不一致时,有enter部分和exit部分,前者表示存在多余的数据,后者表示存在多余的元素.本节将给大家介绍如何处理这些多余的东西,最后会给大家 ...

  6. MySQL数据库使用mysqldump导出数据详解

    mysqldump是mysql用于转存储数据库的实用程序.它主要产生一个SQL脚本,其中包含从头重新创建数据库所必需的命令CREATE TABLE INSERT等.接下来通过本文给大家介绍MySQL数 ...

  7. 微信JS接口汇总及使用详解

    这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...

  8. Apache &plus; Tomcat集群配置详解 （1）

    一.软件准备 Apache 2.2 : http://httpd.apache.org/download.cgi,下载msi安装程序,选择no ssl版本 Tomcat 6.0 : http://to ...

  9. ext&period;js的mvc开发模式详解

    ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...

随机推荐

  1. 将一个div始终定位在屏幕中心

    //div的id为box #box{ width:200px; heighti:200px; border:1px solid #f00; //重点是以下规则 position:absolute; t ...

  2. Asp&period;Net中动态页面转静态页面

    关于在Asp.Net中动态页面转静态页面的方法网上比较多.结合实际的需求,我在网上找了一些源代码,并作修改.现在把修改后的代码以及说明写一下. 一个是一个页面转换的类,该类通过静态函数Changfil ...

  3. Mysql导出导入乱码问题解决

    MySQL从4.1版本开始才提出字符集的概念,所以对于MySQL4.0及其以下的版本,他们的字符集都是Latin1的,所以有时候需要对mysql的字符集进行一下转换,MySQL版本的升级.降级,特别是 ...

  4. 解决Spring中singleton的Bean依赖于prototype的Bean的问题

    在spring bean的配置的时候,可能会出现一个singleton的bean依赖一个prototype的bean.因为singleton的bean只有一次初始化的机会,所以他们的依赖关系页只有在初 ...

  5. PowerDesigner反projectM连接ySql没有mySql odbc驱动器

    PowerDesignerfang反project连接MySql没有mySql odbc驱动器 需要安装 MySql ODBC驱动器.百度下载mysql-connector-odbc-5.3.4-wi ...

  6. &lbrack;转载&rsqb; ConcurrentHashMap原理分析

    转载自http://blog.csdn.net/liuzhengkang/article/details/2916620 集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的 ...

  7. 201621123060《JAVA程序设计》第八周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码: publ ...

  8. RN 使用第三方字体

    Android: 程序会尝试在 assets/fonts 目录下查找字体文件,如果没找到会使用默认的字体 所以将文件放到路径下才能生效! [project root]/android/app/src/ ...

  9. MySQL GTID复制Slave跳过错误事务Id以及复制排错问题总结

    GTID复制典型的复制错误有两种:1,数据对象级别的错误,包括主库上update的数据在从库上不存在,主从逐渐冲突,库表索引等对象的冲突等等,   如果是纯粹的跳过错误的话,这一类的错误需要跳过思路是 ...

  10. git push 到github时，报错：ERROR&colon; Permission to xxx&period;git denied to user

    之前我电脑的本地git已经登录了一个github账号,今天想换另外一个新的github账户来提交项目,相当于同一台电脑使用两个github账户. 于是我先修改用户名和邮箱. git config -- ...

相关文章