简单例子

　　在这个例子中，你将会使用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. linux里的CPU负载

    昨天查看Nagios警报信息,发现其中一台服务器CPU负载过重,机器为CentOS系统.信息如下: 2011-2-15 (星期二) 17:50 WARNING - load average: 9.73 ...

  2. 文件下载（StreamingHttpResponse流式输出）

    文件下载(StreamingHttpResponse流式输出) HttpResponse会直接使用迭代器对象,将迭代器对象的内容存储成字符串,然后返回给客户端,同时释放内存.可以当文件变大看出这是一个 ...

  3. hibernate detached分离查询 与 抓取策略注意事项

    1.detached在抓取策略为 jion显式左外连接查询情况下 会产生笛卡儿积现象 DetachedCriteria dc = DetachedCriteria.forClass(Topic.cla ...

  4. vue项目如何打包扔向服务器

    vue项目如何打包扔向服务器   当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放 ...

  5. HTML中的SEO和HTML语义化

    SEO 1) <title>网站SEO标题</title>, 百度搜索出来的记录, 其标题基本就提取至网站的title, 标签, 因此标题起的好, 不论对点击率还是SEO都至关 ...

  6. vue之 node.js 的简单介绍

    一.什么是 node.js? 它是可以运行在JavaScript的服务平台 二.安装 1.node.js的特性 - 非阻塞IO模型 - 时间驱动 2.运用场景 - 高并发低业务 - 实时场景 - 聊天 ...

  7. Delphi 正则表达式起步

    Delphi 正则表达式起步 在 Delphi 中使用正则表达式, 目前 PerlRegEx 应该是首选, 准备彻底而细致地研究它. 官方网站: http://www.regular-expressi ...

  8. S5第一次月考

    # Python五期月考一 # 1 介绍 # 满分100分,90分及格 # # 考试范围: # 1.Python语法 # 2.数据类型 # 3.流程控制 # 4.函数 # 5.模块 # # 考试时间: ...

  9. LeetCode：N叉树的后序遍历【590】

    LeetCode:N叉树的后序遍历[590] 题目描述 给定一个 N 叉树,返回其节点值的后序遍历. 例如,给定一个 3叉树 : 返回其后序遍历: [5,6,3,2,4,1]. 题目分析 这道题有好几 ...

  10. linux中相关服务不能访问的排错技巧

    Linux相关服务不能访问的排错步骤,以HTTP服务为例: 一.服务端排查思路: 1.检查SELinux是否关闭(针对CentOS6系统)  (1)临时关闭      setenforce 0  (2 ...