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

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

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

data()的工作过程

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

[javascript] view plaincopy

  1. <body>
  2. <p>Lion</p>
  3. <p>Tiger</p>
  4. <p>Leopard</p>
  5. </body>

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

图1

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

[javascript] view plaincopy

  1. //定义数组
  2. var dataset = [3, 6, 9];
  3. //选择body中的p元素
  4. var p = d3.select("body").selectAll("p");
  5. //绑定数据到选择集
  6. var update = p.data(dataset);
  7. //输出绑定的结果
  8. 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部分。请看如下代码:

[javascript] view plaincopy

  1. var dataset = [3, 6, 9, 12, 15];
  2. var p = d3.select("body").selectAll("p");
  3. var update = p.data(dataset);
  4. console.log(update);
  5. console.log(update.enter());
  6. 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中没有内容。如果将数组换成:

[javascript] view plaincopy

  1. var dataset = [3];

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

图6

谢谢阅读。

时间: 2024-10-12 17:32:14

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

【 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

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

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

【 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 选择元素和绑定数据

选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部 这两个函数返回的结果称为选择集.例如,选择集的常见用法如下: var body = d3.select("body"); //选择文档中的body元素 var p1 = body.select("p"); //选择body中的第一个

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