选择集和数据的关系是 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() 的工作过程，谢谢阅读。

文档信息

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

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

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

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

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

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

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

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

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

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

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

  9. Solr系列二：solr-部署详解（solr两种部署模式介绍、独立服务器模式详解、SolrCloud分布式集群模式详解）

    一.solr两种部署模式介绍 Standalone Server 独立服务器模式:适用于数据规模不大的场景 SolrCloud  分布式集群模式:适用于数据规模大,高可靠.高可用.高并发的场景 二.独 ...

随机推荐

  1. (int)、(int&)和(int*)的区别（转）

    (1).首先通过一个例子看(int)和(int&)的区别: float a = 1.0f;cout << (int)a << endl;cout << (i ...

  2. ACE 6.2.0 win7_64 编译

    Windows平台 ~ Microsoft Visual Studio 1)        下载ACE源码 ACE官方网址:http://www.cs.wustl.edu/~schmidt/ACE.h ...

  3. std::string和int类型的相互转换（C/C++）

    字符串和数值之前转换,是一个经常碰到的类型转换. 之前字符数组用的多,std::string的这次用到了,还是有点区别,这里提供C++和C的两种方式供参考: 优缺点:C++的stringstream智 ...

  4. Centos6.5下rsync文件同步安装配置及遇到的问题解决方法

    实验节点如下: 源节点:192.168.0.111 备份节点:192.168.0.112 ------------------------------以下部分在两个节点上执行1.防火墙开放873端口( ...

  5. Python 基础篇：字符串、列表操作

    字符串操作 判断是否为数字 string = "200" string.isdigit() >>false 待完善.. 列表操作 列表是我们最以后最常用的数据类型之一, ...

  6. expdp ORA-39213

    [oracle@BI2 dir_dp]$ impdp ruijie_kettle/ruijie_kettle schemas=ruijie_kettle directory=dir_dp dumpfi ...

  7. Project not selected to build for this solution configuration.

    Project not selected to build for this solution configuration.   When you upgrade your older solutio ...

  8. hadoop基本命令1

    (大讲台——国内首个it在线混合式自适应学习平台,轻量级的高薪就业和技能提升解决方案) 1.列出所有Hadoop Shell支持的命令$ bin/hadoop fs -help2.显示关于某个命令的详 ...

  9. Git权威指南 读笔（3）

    第九章 恢复进度: $ git stash list 显示存储的工作进度列表. $ git stash 保存当前的工作进度,分别对暂存区和工作区的状态进行保存. $ git stash pop [-- ...

  10. CODEVS 2055 集合划分

    [题目描述] 对于从1到N(1<=N<=39)的连续整数集合,划分成两个子集合,使得每个集合的数字之和相等. 举个例子,如果N=3,对于{1,2,3}能划分成两个子集合,他们每个的所有数字 ...