选择集和数据的关系是 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. C++动态二维数组的创建

    两种方式. 一,二级指针,创建2行3列的动态二维数组. 这里,p指向的是2个地址,这两个地址各指向长度为3的一维整型数组. 在内存中,每行元素内部顺序排列.两行元素的首地址不同,p[1]与p[2]存放 ...

  2. 3.MySQL之创建/删除用户

    登录mysql服务器后可使用grant命令来创建用户并赋予相关权限. mysql> use mysql; Reading table information for completion of ...

  3. 关于Active控件的电子签名 转

    关于Active控件的电子签名 两种方案:一是自己制作证书,客户端安装证书后就可以识别该控件:二就是买官方的喽,在国内找verisign的代理,负责各种电子签名,任何一台浏览器都可以识别该证书.该公司 ...

  4. 为什么要有binary-to-text encoding?

    在wikipedia上看MIME的介绍的时候,有一节是关于Content-Transfer-Encoding的,里面提到了binary-to-text encoding,我就想,既然计算机中的信息使用 ...

  5. 有关C++ std::string 类的类型转换 其他语言永远无法理解的伤

    最近做了个项目,C++的MFC窗口程序,一个基于dialog的学生-图书管理系统,有一些感触,最后会放上一些项目截图和部分代码提供大家参考.如果有什么好方法和建议欢迎指导. 强类型,为什么这么伤 我知 ...

  6. Linux查看进程和终止进程的技巧

    1. 在LINUX命令平台输入1-2个字符后按Tab键会自动补全后面的部分(前提是要有这个东西,例如在装了tomcat的前提下,输入tomcat的to按tab). 2. ps 命令用于查看当前正在运行 ...

  7. opengl雾开启

    #include <GL/glut.h> #include <stdio.h> #include <iostream> using namespace std; s ...

  8. 开发设计模式（五）单例模式（Singleton Pattern）

    http://blog.sina.com.cn/s/blog_89d90b7c0101805m.html 单例模式:意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提 ...

  9. POJ3613 Cow Relays [矩阵乘法 floyd类似]

    Cow Relays Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7335   Accepted: 2878 Descri ...

  10. Cocos2dx坐标转换

    Cocos2dx坐标转换 这段时间加班有点猛,没有太多时间来写博客了,ok,继续完成任务: 前言 这里将会重点介绍四个函数: convertToNodeSpace convertToNodeSpace ...