D3.js学习笔记（一）——DOM上的数据绑定

时间：2022-09-08 19:22:24

开始学习D3.js，网上没有找到很满意的中文教程，但是发现了一个很好的英文教程，讲解的非常详细。从一个初始简单的HTML网页开始，逐步加入D3.js的应用，几乎是逐句讲解。学习的时候，就顺便翻译成中文，来和大家分享 。当然，更推荐看英文原文教程了，点击这里。

简单例子

在这个例子中，你将会使用D3.js来把数据绑定到简单网页的DOM元素(DOM element)上。

现在开始了！下面是一个简单的HTML网页：

 <!DOCTYPE html>

 <html>

     <head>

         <script type="text/javascript" src="d3.v3.min.js"></script>

     </head>

     <body>

     </body>

 </html>

打开Chrome的开发者工具进入JavaScript控制台，观察元素查阅器（inspector）。

在JavaScript控制台上输入下面这段代码：

 var theData = [1,2,3]  //一个数组

 var p = d3.select("body").selectAll("p")

     .data(theData)

     .enter()

     .append("p")

     .text("hello");

结果如下：

D3.js学习笔记（一）——DOM上的数据绑定

恭喜你！你现在已经成功使用D3.js把一些数据绑定到了DOM元素上了！

D3.js 的 SelectAll 方法

在上面那段Javascript代码中，有一个方法是：.selectAll("p").

D3.js中的selectAll方法使用的是CSS3中的选择器来获取DOM元素。不同于select方法（该方法获取的是第一个目标元素），而selectAll方法选择的是所有匹配的元素。

但是！！初识的HTML网页中并不包含<p>，也就是说，该方法返回的是一个空的选择结果（selection）。

在此之后呢，我们又使用了.data(theData)和.enter()把数据绑定到这个空的选择结果中，这是怎么回事呢？

D3.js的data操作符(operator)

在上面那段Javascript代码中，接下来的是.data(theData)。

这个data操作符是把一个数据数组（可能是数值数组、对象数组或者别的什么数组）与当前的选择结果联系（join）起来。

在本例中，并没有提供key值，因此theData数组中的每一个元素都被分配到当前选择结果中的一个元素上。数组中第一个元素，也就是数字1，被分配到第一个<p>元素，第二个元素2被分配到相应的第二个<p>，以此类推。

但是！！正如上面说过的，初识网页中根本没有一个<p>，那么到底怎么回事？

D3.js的Virtual Selections

与D3.js中的其他方法不同的是，data操作符返回的是三个Virtual selection。

这三个virtual selection是enter,update以及exit。

enter选集：对所有缺失的元素以占位符placeholder替代。

update选集：包含现有的元素，并绑定到数据

剩下的元素最终都会出现在exit选集中，并被移除。

由于从下面代码得到的选集是空的：

 d3.select("body").selectAll("p")

因此，虚拟enter选集中包含的是<p>元素的占位符。

我们将会的后面章节继续讨论虚拟选集enter,update,exit，而现在，我们就把焦点放在enter虚拟选集上。

如果想要了解更多虚拟选集(virtual selection)知识，这里推荐一篇经典文章：Mike Bostock 写的"Thinking with Joins"。

D3.js的enter方法

D3.js的enter方法从data操作符返回一个虚拟选集。这个方法只能作用于data操作符，因为只有data操作符返回的是三个虚拟选集。

 var p = d3.select("body").selectAll("p")

   .data(theData)

   .enter()

正如前面所说，对于数组中的数据元素，如果缺少与之对应的DOM元素，那么就会有一个占位符来顶替，而enter方法返回的就是这些占位符集合的引用(reference)。

得到这个引用之后，就能对该集合操作了。

在这里需要特别注意的是，这个引用后只能链接(chaining)append，insert以及select操作符，通过他们来操作该引用所指向的集合。

在这些操作符链接到.enter()选集，我们就可以像处理其他选集那样，来对其内容进行更改。

D3.js的Append操作符

我们再次来看看这段代码：

 var p = d3.select("body").selectAll("p")

     .data(theData)

     .enter()

     .append("p")

我们把.append("p")作用于.enter()选集之上。

对上一步中所产生的每个占位符（placeholder），都有一个P元素插入进去。

由于在我们的数据数组中，有三个数据元素（1,2,3），但是在网页中，没有一个P元素，所以.append("p")就创建并加入了3个段落元素。

在本例中，当我们对.enter()的选集使用了append操作符之后，返回的是一个具有3个HTML段落元素的选集。

D3.js的text操作符

如果我们把之前那段Javascript代码做一改变，去掉text操作符：

 var theData = [1,2,3]

 var p = d3.select("body").selectAll("p")

     .data(theData)

     .enter()

     .append("p");

我们得到的结果是：

D3.js学习笔记（一）——DOM上的数据绑定

我们注意到，与之前的那张图片相对比，这里的段落都是不包含任何文字的。

D3.js学习笔记（一）——DOM上的数据绑定

text操作符对所有被选择的元素的textContent属性进行赋值。

在本例中，.text("hello")，值是“hello”。因为我们的选集中有3个<p>元素，因此每个元素都被插入了“hello”。

数据到哪儿去了？

在本文的例子中，一开始就是一个Javascript的数据数组：

 var theData = [1,2,3]

可是到最后，我们得到了三个内容是“hello”的段落。

那么对于数字1,2,3，发生了什么？

D3.js的data操作符回顾

让我们通过一个简单的例子，在javascript控制台中再次观察下data操作符：

 console.log(d3.select("body"));

当我们点击回车，然后点击向下的箭头来查看“body”的属性，你看到的应该如下：

D3.js学习笔记（一）——DOM上的数据绑定

在0:<body>这一行下面，你可以看到HTML中body元素的属性。

现在，我们在Javascript控制台运行一下下面这句代码，我们加入了.data()操作符。

 console.log(d3.select("body").data([1]));

我们的数据出现在名为_data_的属性中：

D3.js学习笔记（一）——DOM上的数据绑定

当我们把数据分配到一个元素上时，这个数据被存储到_data_属性中。

到此，数据可以通过_data_属性被再选。这也就是我们所说的数据绑定到Dom元素(Binding Data to Dom Elements)。

初始例子回顾

回顾我们在页面最上方提到的那个例子，现在我们使用console.log()来查看数据绑定到什么地方了：

 var theData = [1,2,3]

 var p = d3.select("body").selectAll("p")

     .data(theData)

     .enter()

     .append("p")

     .text("love")

 console.log(p);

结果是：

D3.js学习笔记（一）——DOM上的数据绑定

从上图可以看出3个段落元素被添加。

你还会看到最后一个（第三个）段落元素的_data_属性值为3，这个值就是来自我们的数据集theData！

D3.js学习笔记（一）——DOM上的数据绑定的更多相关文章

  1. D3&period;js学习笔记（二）——使用绑定在DOM上的数据

    简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYP ...

  2. d3&period;js学习笔记（五）——将数据结构化为D3&period;js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  3. D3&period;js学习笔记（六）——SVG基础图形和D3&period;js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  4. D3&period;js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

  5. D3&period;js学习笔记（四）—— 使用SVG坐标空间

    目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...

  6. 精通D3&period;js学习笔记（1）基础的函数

    买了本吕大师的d3可视化.最近来学习一下,做个笔记.   1.选择元素  select(第一元素) 和selectAll(全部的元素)      类似css的选择器.也可以是dom选中的. var i ...

  7. 精通D3&period;js学习笔记（2）比例尺和坐标

    1.线性比例尺 d3.scale.linear()   创建一个线性比例尺           .domain([0,500]) 定义域           .range([0,1000]) 值域 l ...

  8. js学习笔记--dom部分&lpar;一&rpar;

    js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...

  9. Vue&period;js学习笔记（2）vue-router

    vue中vue-router的使用:

随机推荐

  1. sql 将查询结果为多行一列合并为一行一列

    使用sql stuff函数 /*         stuff(param1, startIndex, length, param2)说明:将param1中自startIndex(SQL中都是从1开始, ...

  2. PHPCMS V9 框架代码分析（入口程序）

    PHPCMS是采用MVC设计模式开发,基于模块和操作的方式进行访问,采用单一入口模式进行项目部署和访问,无论访问任何一个模块或者功能,只有一个统一的入口. 入口程序是在前期处理用户请求的引导程序.它是 ...

  3. UIView的user Interaction Enabled属性

    A Boolean value that determines whether user events are ignored and removed from the event queue. 译: ...

  4. 在C&num; WinForm程序中创建控件数组及相应的事件处理

    控件数组是VB提供的一个优秀的设计解决方案,它能很方便快捷的处理大批同类控件的响应和时间处理,但不知为什么在C#中这个优秀特性没有传承下来,甚为可惜,本文将要探讨就是如何在C# WinForm程序实现 ...

  5. PHP程序开发人员要掌握的知识

    文件目录处理函数包80%以上的函数的功能的灵活运用. 日期时间函数中的80%以上的函数的功能的灵活运用 数学函数库中的100%的内容. 网络库中的60%以上的内容,对各个函数的功能比较熟悉. 字符串处 ...

  6. SpringCloud（6）分布式配置中心Spring Cloud Config

    1.Spring Cloud Config 简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组 ...

  7. secureCRT恶意终止下次无法启动

    secureCRT使用中恶意中断后会在C:\Documents and Settings\*peng\Application Data目录下产生一个secureCRT.dmp文件 下次正常运行s ...

  8. mongodb集群配置主从模式

    测试环境 操作系统:CentOS 7.2 最小化安装 主服务器IP地址:192.168.197.21 master-node 从服务器IP地址:192.168.197.22 slave-node 关闭 ...

  9. JavaScript条件语句4--分支语句--if

    JavaScript条件语句--分支语句 学习目标 1.掌握条件语句if 2.掌握prompt()的应用 3.掌握alert的应用 If语句 语法一: If(condition){ statement ...

  10. 最简单的socket通信

    服务器端程序 import socket # 套接字 sk = socket.socket() # 先买一部手机 # sk.bind(('192.168.13.2',9000)) # 绑定一个电话卡 ...

相关文章