简单例子

　　在这个例子中，你将会使用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. windows 全角 怎么切换到半角

    windows 全角 怎么切换到半角 :shift+空格键

  2. 定时备份DB和WEB文件

    sql.sh #!/bin/bash ##备份数据库: 每4小时 date2=`date "+%Y-%m-%d---%H.%M.%S"` /alidata/server/mysql ...

  3. 查找文件路径find

    查找文件路径find              1.按照文件名查找 (1)find / -name httpd.conf #在根目录下查找文件httpd.conf,表示在整个硬盘查找 (2)find ...

  4. 5.MongoDB CRUD Operations-官方文档摘录

    总结 1. CRUD:create, read, update, and delete DOCUMENT 2.在3.2版本的插入方式 db.collection.insertOne() db.coll ...

  5. Linux内核学习资料

    1.为什么计算机的学生要学习Linux开源技术 http://tinylab.org/why-computer-students-learn-linux-open-source-technologie ...

  6. 【我的Android进阶之旅】解决bug:You need to use a Theme.AppCompat theme (or descendant) with this activity.

    前言 今天用Android Studio 生成Activity的时候,默认继承AppCompatActivity ,而在AndroidManifest.xml我对该Activity设置了一个主题,然后 ...

  7. oracle入门（4）——少而常用的命令

    [本文介绍] 本文将介绍使用oracle的常用命令,不是”大全“,但少而实用. 下面的命令都是在项目用到的才记录下来的,如果以后用到其他的,会不断更新. [命令介绍] 描述: 命令: [数据库]   ...

  8. oracle入门（3）——oracle服务解释

    [本文介绍] oracle不像mysql,安装后之后一个服务,如果mysql连接不上,打开其服务就行.oracle是有多个服务,哪些服务要开,哪些服务没必要开,对新手来说未必不是一个难点.下面对ora ...

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

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

  10. django安装与卸载

    安装 D:\Django-1.8.2>python setup.py installrunning install Installed d:\python27\lib\site-packages ...