简单例子

　　在这个例子中，你将会使用D3.js来将数据绑定到DOM元素上。然后再使用D3.js利用绑定到DOM元素上的数据来更新网页。

　　在上一章中，我们以下面这个页面作为开始的：

 <!DOCTYPE html>

 <html>

     <head>

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

     </head>

     <body>

     </body>

 </html>

　　然后我们又使用JavaScript控制台把数据绑定到HTML元素上：

 var theData = [1,2,3]

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

     .data(theData)

     .enter()

     .append("p")

     .text("hello");

　　于是，我们得到了：

　　到此——我们已经把数据绑定到DOM元素上了。

　　然而，我们真正想要的是取回我们的数据，并把它们显示在我们的初始网页示例。

　　换句话说，我们如何取出DOM元素的值？

　　打开Chrome的开发者工具，打开JavaScript控制台和元素查阅器（element inspector）。

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

 var theData = [1,2,3]

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

     .data(theData)

     .enter()

     .append("p")

     .text(function(d){return d})

　　然后我们得到：

　　正如你所看到——我们现在看到了三个包含了我们数据的段落，而不是三个内容是Hello的段落！那么，现在又要说祝贺啦——你现在已经通过D3.js使用绑定到DOM元素上的数据更新了网页！

D3.js 的text操作符回顾

　　我们可以看到Javascript代码中只有一个地方发生了变化：

 .text("hello");

　　变为：

 .text(function(d){return d;});

　　不论改变前后，.text()操作符作用的选集都是：

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

    .data(theData)

    .enter()

    .append("p")

　　这个选集就是三个HTML<p>元素。

　　正如我们在上一章中提到的，text操作符为所有选中的元素的textContent属性赋值。

　　但是，如果值传递的是一个函数（function），那么这些函数会按序对每一个元素进行计算。同时，这些函数返回值就用来作为元素的文本内容（text content）.

　　在我们的例子中，这就意味着，并非像之前把文本值设置为“hello”，函数对每一个元素，得到其_data_属性并把它返回给text操作符，然后它把返回值赋值给元素的文本内容。

D3.js操作符中的JavaScript函数

　　我们传递到text操作符中的JavaScript函数是：

 function(d){ return d; }

　　如果你对JavaScript函数不熟悉，这里有一个简短的介绍：

 function functionName(variableName){

   return variableName;

 }

　　"function"操作符定义了一个名为“functionName”的函数，还有一个参数是变量variableName，最后函数返回这个变量。

　　如果没有函数名（functionName），那么就叫做无名函数（anonymous function）。有时候，有的函数仅仅在一个地方使用，因此我们在声明的时候，就把函数声明为无名函数，这样做可以简化我们的代码。在本例中，函数仅仅是在D3.js的text操作符的内部使用了：

 .text(function (d) { return d; });

　　注意：我们的函数并不是只能有一行，也并不一定只能是一个简单的返回，我们还可以让函数这样：

 function (d){

    var addedNumber = 2;

    var tempNumber;

     //把输入数据加上2

     tempNumber = d + addedNumber;

     return tempNumber;

 }

　　我们把上面的函数作为一个完整的D3.js函数放到JavaScript控制台，运行后得到：

　　正如你所看到的，我们的函数给我们的数据集都加了2，然后更新为DOM元素的文本内容。

　　使用函数，你可以通过Javascript操纵数据，输出你想要的任何内容。在数据可视化中，当你向往根据数据值得不同来让SVG对象的样式和格式有所区别时，这一点就变得非常重要，也非常有用。

D3.js操作符内的可用变量（variable available）

　　在本例中：

 .text( function ( d ) { return d; });

　　你可以看到变量d在无名函数中的可用变量。这个变量是由D3.js提供的的，该变量是对要处理的元素的_data_属性的引用。

　　还有另外两个D3.js提供的变量可以用，他们是：this和i。

　　this代表的是当前在处理的DOM元素。

　　i是指当前处理的HTML元素在已选元素选集中的索引值。值得注意的是，所有要处理的数据都是按照一定的次序。注意：i是从0开始的。这就意味着我们的数据集：

 var theData = [1,2,3]

　　数据处理的顺序是：”1“，”2“，最后是”3“。其中，”1“的i值是0，”2“的i值是1，”3“的i值是2。

　　我们可以在JavaScript控制台上运行下面这段代码来证明：

 var theData = [1,2,3]

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

     .data(theData)

     .enter()

     .append("p")

     .text(function(d,i){

         return "i = "+i+" d = "+d;

     });

　　运行结果是：

　　索引值的可获取也方便了很多事件的处理，比如说更改样式、格式化（formatting）。

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

  1. D3.js学习笔记（六）——SVG基础图形和D3.js

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

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

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

  3. D3.js学习笔记（四）—— 使用SVG坐标空间

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

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

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

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

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

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

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

  7. ［转］node.js学习笔记(二)

    二.express 1.安装 express4 npm --registry=http://registry.npmjs.org install -g express-generator (全局) 2 ...

  8. 【转】require.js学习笔记(二)

    require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...

  9. 精通D3.js学习笔记（2）比例尺和坐标

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

随机推荐

  1. python基础之类的继承与派生、组合、接口与归一化设计、抽象类、子类中调用父类方法

    一.什么是继承 继承是一种创建新的类的方式,新建的类可以继承自一个或者多个父类,原始类称为基类或超类,新建的类称为派生类或子类. 派生:子类继承了父类的属性,然后衍生出自己新的属性,如果子类衍生出的新 ...

  2. 目标探测：r-cnn, fast-rcnn, faster-rcnn, yolo, mask-rcnn

    目标探测:r-cnn, fast-rcnn, faster-rcnn, yolo, mask-rcnn 作者:尼箍纳斯凯奇 链接: https://www.zhihu.com/question/574 ...

  3. 海量数据存储之nosql教程（转）

    add by zhj: 不错的系列,作者介绍了NoSQL数据库,并重点研究了Memcached和Redis,不知道后续是否还有其它NoSQL数据库的文章 海量数据存储之nosql教程之-01基础理论 ...

  4. Mysql数据库(表)的导出和导入小结

    Why? 有人因为想看导出的开房记录库文件,然后学会了Mysql数据库文件的导入操作~: 有人因为工作原因,要用到数据库的备份与导入,然后应需学会了骚操作~: 我因为~~emmm 想看某个导出的库文件 ...

  5. sql server dba之路

    转自:https://blog.csdn.net/dba_huangzj/article/details/7841441 在专职DBA工作一年过一个月以后,开通了CSDN的博客专栏,在第一篇文章中,我 ...

  6. oracle Dba之路

    如何快速的成为一个合格的 DBA? 2010年11月03日 11:25:00 阅读数:584 原文来自:http://topic.csdn.net/u/20101031/21/A78B2EA1-6F2 ...

  7. 006-基于hyperledger fabric1.4（ 官方文档）编写第一个应用【外部nodejs调用】

    一.概述 官方原文地址 Writing Your First Application如果对fabric网络的基本运行机制不熟悉的话,请看这里. 注意:本教程是对fabric应用以及如何使用智能合约的简 ...

  8. Android View体系 系列文章

    http://www.cnblogs.com/Free-Thinker/p/6768783.html

  9. 解决127.0.0.1 localhost 劫持问题

    在一个安装iis的过程中,把网站部署上去之后就发现127.0.0.1或者localhost都会跳转到一个莫名的网站,发现断网之后就是会跳转到一个Http://www.76636.com 类似这种的网站 ...

  10. Redis三（List操作）

    List操作 redis中的List在在内存中按照一个name对应一个List来存储.如图: lpush(name,values) 1 2 3 4 5 6 7 8 # 在name对应的list中添加元 ...