简单例子

　　在这个例子中，你将会使用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. 数据库操作(使用FMDB)

    iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...

  2. 14.wamp自定义网站根目录

    1.首先打开Apache 中的配置文件httpd.conf crtl+f 搜索  documentroot  ,在找到的目录中将目录修改自己的网站的目录,注意\ 与/ 2.在向下移动,找到<Di ...

  3. DOM 综合练习(二)

    // 需求一: 二级联动菜单 <html> <head> <style type="text/css"> select{ width:100px ...

  4. Redis的LRU机制（转）

    原文:Redis的LRU机制 在Redis中,如果设置的maxmemory,那就要配置key的回收机制参数maxmemory-policy,默认volatile-lru,参阅Redis作者的原博客:a ...

  5. JsonResponse对象浅析

    JsonResponse   JsonResponse 对象: class JsonResponse(data, encoder=DjangoJSONEncoder, safe=True, json_ ...

  6. session补充

  7. 前端基础-css（1）

    一.css的引入方式 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面 ...

  8. io.Writer

    var w io.Writer // 设置为你的 io.Writer var b bytes.Buffer fmt.Fprint(&b, "Hello World") w ...

  9. Spring Security教程 ---- 验证码功能的实现

    有三中方法可以实现验证码的功能 第一种是自定义一个filter,放在SpringSecurity过滤器之前,在用户登录的时候会先经过这个filter,然后在这个filter中实现对验证码进行验证的功能 ...

  10. nginx缓存原理

    一.HTTP字段理解 1.Expires: 该字段的http1.0时的规范,值为一个绝对时间的GMT格式的时间字符串,代表缓存资源的过期时间,在这个时点之前即命中缓存. 缺点:服务器返回的时间,可能与 ...