D3.js学习笔记(二)——使用绑定在DOM上的数据

简单例子

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

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

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <script type="text/javascript" src="d3.v3.min.js"></script>
5     </head>
6     <body>
7     </body>
8 </html>      

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

1 var theData = [1,2,3]
2 
3 var p = d3.select("body").selectAll("p")
4     .data(theData)
5     .enter()
6     .append("p")
7     .text("hello");

  于是,我们得到了:

revisited

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

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

  换句话说,我们如何取出DOM元素的值?

I want you

  打开Chrome的开发者工具,打开JavaScript控制台和元素查阅器(element inspector)。

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

1 var theData = [1,2,3]
2 
3 var p = d3.select("body").selectAll("p")
4     .data(theData)
5     .enter()
6     .append("p")
7     .text(function(d){return d})

  然后我们得到:

function

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

D3.js 的text操作符回顾

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

1 .text("hello");

  变为:

1 .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函数是:

1 function(d){ return d; }

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

1 function functionName(variableName){
2   return variableName;  
3 }

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

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

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

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

1 function (d){
2    var addedNumber = 2;
3    var tempNumber;
4     //把输入数据加上2
5     tempNumber = d + addedNumber;
6     return tempNumber;
7 }    

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

addedNumber

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

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

D3.js操作符内的可用变量(variable available)

  在本例中:

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

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

  还有另外两个D3.js提供的变量可以用,他们是:thisi

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

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

1 var theData = [1,2,3]

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

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

1 var theData = [1,2,3]
2 
3 var p = d3.select("body").selectAll("p")
4     .data(theData)
5     .enter()
6     .append("p")
7     .text(function(d,i){
8         return "i = "+i+" d = "+d;
9     });

  运行结果是:

available variable

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

posted @ 2014-01-11 11:18  楚狂人  阅读(3727)  评论(2编辑  收藏  举报