D3 中绑定数据大多是由 data() 函数来完成的，它是怎样工作的，它与 datum() 有什么区别呢？

data()函数能够将数组各项分别绑定到各元素上，而且能够设置绑定的规则。data()还能够处理数组长度与元素数量不一致的情况。当数组长度大于元素数量，能为多余数据预留元素位置，以便将来插入新元素；当数组长度小于元素数量时，能提供指向多余元素的方法，以便将来删除。下面来剖析data()是如何绑定数据的，相比datum()有哪些新功能。

data()的工作过程

假设body中有三个段落元素p，HTML代码如下：

<body>

<p>Lion</p>

<p>Tiger</p>

<p>Leopard</p>

</body>

要将一个数组的各项分别绑定到各元素上，假设要绑定的数组为[3,6,9]，那么我们希望第一个p元素绑定3，第二个绑定6，第三个绑定9。这种情况就需要使用data()函数，如果使用datum()，则会将数组本身绑定到各元素上，即第一个p元素绑定[3,6,9]，第二个绑定[3,6,9]，第三个也是绑定[3,6,9]，其区别如图1所示。

图1

使用data()绑定数据的代码如下：

//定义数组

var dataset = [3, 6, 9];

//选择body中的p元素

var p = d3.select("body").selectAll("p");

//绑定数据到选择集

var update = p.data(dataset);

//输出绑定的结果

console.log(update);

这段代码中，将数组绑定到选择集并输出结果。如图2所示，数组的三项分别被绑定到了个元素上，与图2的预测一致。

图2

上例中，数组长度与元素数量正好相等。两者也有不相等的情况，如果数组长度为5，而元素数量为3，则多出2个数据没有绑定元素。如果数组长度为1，元素数量为3，则会有2个元素没有绑定数据。在D3中，根据数组长度和元素数量的关系，分别把各种情况称为：

  • update：数组长度 = 元素数量
  • enter：数组长度 > 元素数量
  • exit：数组长度 < 元素数量

这三个单词的含义可能很难理解，update的原意为“更新”，enter的原意为“进入”，exit的原意为“退出”，直译的结果很难表现所需的意思。其实，在数据可视化中，手中的数据通常都是要进行可视化的，而没有绑定数据的元素是没有用的。那么对于这三个单词，我们可以理解为：如果数组长度大于元素数量，则多余的数组项“即将进入可视化（enter）”；如果数组长度小于元素数量，则多余的元素“即将退出可视化（exit）”；如果数组长度等于元素数量，元素上的数据“得到了更新（update）”。

还是很难理解吗？没关系，请看图3。其中，左图表示数组长度为5、元素数量为3的情况，那么有两个数组项没有与之相连的元素，这一部分被称为enter。右图表示数组长度为1、元素数量为3的情况，那么有两个元素没有数组项与之相连，这一部分称为exit。数组项和元素相连的部分被称为update。

图3

data()函数返回一个对象，对象里包含update部分和两个函数。一个是enter()函数，返回enter部分，一个是exit()函数，返回exit部分。请看如下代码：

var dataset = [3, 6, 9, 12, 15];

var p = d3.select("body").selectAll("p");

var update = p.data(dataset);

console.log(update);

console.log(update.enter());

console.log(update.exit());

这段代码中，数组长度为5，元素数量为3，多出两个数组项。其输出结果如图4和5所示。

图4

图4中，可以看到被绑定数据的三个p元素。还有enter()和exit()两个函数，用于返回本次绑定中enter和exit部分。

图5

图5中，可以看到enter部分中，D3已经为多余的数组项12和15预留了位置，用于将来的操作。enter部分中还有一个update变量，指向update部分。本次绑定中，没有多余的元素，所以exit中没有内容。如果将数组换成：

var dataset = [3];

则exit部分的输出结果如图6所示，可以看到多出的两个p元素。

图6

谢谢阅读。

文档信息

【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据的更多相关文章

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

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

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

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

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

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

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

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

  5. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

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

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

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

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

  8. Apache + Tomcat集群配置详解 （1）

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

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

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

随机推荐

  1. BYTE、WORD与DWORD类型

    Original Link:  http://hi.baidu.com/vnxuaqndtncrxyr/item/f67c83872cf80cd65e0ec10d Author: 厚积薄发 在Visu ...

  2. windows下vs2013使用C++访问redis

    刚开始在windows下使用c++访问reids各种报错,经过网上到处搜方案,终于可以在windows下访问redis了,特将注意事项记录下来: 1.获取redis Window下的开发库源码,从gi ...

  3. iOS 详细解释@property和@synthesize关键字

    /** 注意:由@property声明的属性 在类方法中通过下划线是获取不到的 必须是通过 对象名.属性 才能获取到!- @property和@synthesize关键字是针对成员变量以及get/se ...

  4. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  5. Web程序发布后显示个性化图标

    采用Tomcat发布程序后,浏览器上默认显示程序的图标是Tomcat图标.如下图所示: 需要显示自己个性化的图标,比如,这里显示一个图标. 只需要如下三步设置即可. 将制作的ico图标放在程序的根目录 ...

  6. Xilium.CefGlue利用XHR实现Js调用c#方法

    防外链 博客园原文地址在这里http://www.cnblogs.com/shen6041/p/3442499.html 引 Xilium CefGlue是个不错的cef扩展工程,托管地址在这里 ht ...

  7. hdu 3234 Exclusive-OR

    Exclusive-OR 题意:输入n个点和Q次操作(1 <= n <= 20,000, 2 <= Q <= 40,000).操作和叙述的点标号k(0 < k < ...

  8. 数组有N+M个数字, 数字的范围为1 ... N, 打印重复的元素, 要求O(M + N), 不可以用额外的空间

    数组有N+M个数字, 数字的范围为1 ... N, 打印重复的元素, 要求O(M + N), 不可以用额外的空间 1.题目中要求我们不能使用额外的空间,那么我们能采用在原数组上做文章,这里的重点是如何 ...

  9. JSP中pageEncoding和charset区别，中文乱码解决方案（转载）

    转载自:JSP中pageEncoding和charset区别,中文乱码解决方案 JSP指令标签中<%@ page contentType="text/html;charset=GB23 ...

  10. JAVA 内存管理总结

    1. java是如何管理内存的 Java的内存管理就是对象的分配和释放问题.(两部分) 分配 :内存的分配是由程序完成的,程序员需要通过关键字new 为每个对象申请内存空间 (基本类型除外),所有的对 ...