文档章节

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

黑魔法
 黑魔法
发布于 2016/11/25 18:30
字数 1300
阅读 26
收藏 0

其实就是数据和dom元素的一个交互过程

第一阶段是enter进入阶段, 全部数据准备绑定到dom元素

第二阶段是update更新阶段,有一部分数据已经绑定到dom元素了,就表示已经在更新。剩余的数据肯定还是在enter逐渐进入的阶段

第三阶段是exit退出阶段,全部数据更新完后,如果有多余的dom元素,那么多余的元素就直接退出,不参与数据更新。

 

 

 

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

 

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

data()的工作过程

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

[javascript] view plain copy

 在CODE上查看代码片派生到我的代码片

  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所示。

4-4-6

图1

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

[javascript] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. //定义数组  
  2. var dataset = [3, 6, 9];  
  3.   
  4. //选择body中的p元素  
  5. var p = d3.select("body").selectAll("p");  
  6.   
  7. //绑定数据到选择集  
  8. var update = p.data(dataset);  
  9.   
  10. //输出绑定的结果  
  11. console.log(update);  

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

图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。

4-4-8

图3

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

[javascript] view plain copy

 在CODE上查看代码片派生到我的代码片

  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-9

图4

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

4-4-10

图5

 

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

[javascript] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. var dataset = [3];  

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

4-4-11

图6

本文转载自:http://blog.csdn.net/lzhlzz/article/details/42808041

黑魔法
粉丝 15
博文 178
码字总数 44775
作品 0
武汉
前端工程师
私信 提问
学习笔记(一)——数据可视化D3.js

一、简介和安装 简介 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。D3.js是一个基于数据处理文档的JavaScript库。D3帮助我们使用HTML,SVG和CSS将数据带...

WannaOne
2017/11/08
465
1
可视化前端初探(一)--D3.js

一.D3.js 概述 1.D3 是什么 D3 的全称是(Data-Driven Documents),翻译过来就是一个被数据驱动的文档。简而言之,就是一个主要是用来做数据可视化的 JavaScript 的函数库。由于它本质上是 ...

nightzing
2017/12/14
0
0
【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

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

黑魔法
2016/11/25
56
0
d3.js学习笔记(未完待续)

d3.js和jQuery一样,是链式语法。 d3.js常用方法: 1. d3.select():使用CSS选择器语法从DOM中选择单一元素。 如:d3.select("body"); 2. d3.selectAll():选择所有符合要求的元素。 如:d3....

小微
2013/03/15
5.4K
5
[译]D3.js 之 d3-selection 原理

[译]D3.js 之 d3-selection 原理 译者注 原文: 来自 D3.js 作者 Mike Bostock 的How Selections Works 译者: ssthouse 译文 在前一篇文章中, 我介绍了关于 D3 selection 的基础, 这些基础足以...

ssthouse_hust
2018/06/29
484
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
64
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
26
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
43
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
27
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
昨天
44
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部