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

选择集和数据的关系是 D3 最重要的基础,在【入门 - 第 7 章】时进行过些许讲解,对于要掌握好 D3 是远远不够的。故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update 、enter、exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章。

D3 最大的特色就是能够将数据绑定到DOM上。使用select或selectAll选择元素之后,被选择的元素上是没有数据的。数据绑定就是使被选择元素里包含有数据。与此相关的函数有两个:

  • datum():将指定数据赋值给被选择元素。
  • data():将数据数组与选择集的元素结合。

上面的概念可能难以理解,不要着急,接下来依次剖析datum()和data(),来看看数据绑定是如何工作的,它们又有什么不同之处。虽然不理解原理也可直接使用这两个函数,但遇到意料之外的结果时往往会不知道如何调试,无从下手,因此大致知道其工作过程是必要的。

datum()的工作过程

datum() 绑定数据的方法很简单,在 D3 中使用较少,但能帮助你理解数据 D3 是如何绑定数据的。请先看下面的代码:

<body>
<!-- 三个段落元素 -->
<p>Fire</p>
<p>Water</p>
<p>Wind</p>

<script>
//选择body中所有的p元素,选择集结果赋值给变量p
var p = d3.select("body").selectAll("p");

//绑定数值7到选择集上
p.datum(7);

//在控制台输出选择集
console.log(p);
</script>
</body>

这段代码中,使用datum()将数值7绑定到了选择集上,然后在控制台输出该选择集。在浏览器的控制台中,可以看到如图1所示的输出结果。其中包含有三个p元素,正是使用selectAll选择的三个段落,还可看到选择集的大小(length)、父节点(parentNode)等信息。

图1

展开任意一个p元素,其各属性如图2所示。可以看到,经过绑定之后,多出了一个__data__属性,其数值7正是刚才绑定的数据。展开其他的p元素,会发现每一个元素中都多出了一个__data__,并且数值都是7。

图2

那么datum()的工作过程就再明了不过了,即对于选择集中的每一个元素,都为其增加一个__data__属性,属性值为datum(value)的参数value。此处的value并非一定要是number(数值)型,也可以是string(字符串)、boolean(布尔型)和object(对象),无论是什么类型,其工作过程都是给__data__赋值。如果使用undefined和null作为参数,则将不会创建__data__属性。下面来看看datum()的源代码:

d3_selectionPrototype.datum = function(value) {
return arguments.length
	? this.property("__data__", value)
	: this.property("__data__");
};

由上面的源代码可以知道,其实datum()是用D3的property()函数实现的:如果有参数value,则调用property给当前对象添加一个__data__属性,否则返回__data__属性值。下面来试验一下没有参数的情形:

var p = d3.select("body").selectAll("p");
p.datum(7);
console.log( p.datum() );		//在控制台输出被绑定的数据

这段代码将在控制台输出数字7,正是被绑定的数据。现有有一个问题,数据被绑定在选择集上后,该如何使用呢,或者说D3希望我们如何使用呢。下面举一个例子,使用被绑定的字符串,替换掉原字符串:

<body>
		<p>Fire</p>
		<p>Water</p>
		<p>Wind</p>
		<script>
		var p = d3.select("body").selectAll("p");
		p.datum("Thunder")		//绑定字符串Thunder到选择集上
		  .text(function(d,i){	//替换内容
				return d + " " + i;
		  });
		</script>
</body>

这段代码中,使用datum()绑定了一个字符串Thunder到选择集上,然后调用text()替换字符串。text()用于设置或获取被选择元素的文本。text()的参数是一个无名函数function(d,i),这两个参数分别代表数据(datum)和索引(index)。这两个参数的名称也可以不使用d和i,但意义是不变的。在D3中,建议写成d和i。最后,在这个无名函数里返回了由d和i结合而成的字符串,中间加一空格。结果如图3所示,网页中的三个段落元素p的字符串被替换成:Thunder 0、Thunder 1、Thunder 2。

图3

由结果可知,无名函数的两个参数d和i,d表示被绑定的数据,i表示的索引号是从0开始的。在D3中使用被绑定的数据都是使用上述形式,即定义一个无名函数function(d,i),然后在函数的实现中使用d和i。D3还有一个特性,能使被绑定的数据传递给子元素。对前一段代码稍作修改:

p.datum("Thunder")
.append("span")	//在每一个被选择元素后添加元素span
.text(function(d,i){
		return " " + d;
	});

结果如图4所示,各段落元素的末尾被添加了span元素,内容为Thunder。

图4

下面使用console.log在控制台输出选择集p,输出结果如图5所示。可以看到,子元素span里也含有属性__data__,属性值也是字符串Thunder。于是可以得出一个结论:在被绑定数据的选择集中添加元素后,新元素也会具有被绑定数据。

图5

下一章讲述详细讲述 data() 的工作过程,谢谢阅读。

文档信息

时间: 2024-09-30 16:28:09

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

【 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 选择集与数据详解 — 2 】 使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程 假设body中有三个段落元素p

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

js 中中括号,大括号使用详解

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen","AGE":"28"};上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:Lang