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

最新推荐文章于 2024-11-02 22:17:47 发布

csdn_huangyumin

最新推荐文章于 2024-11-02 22:17:47 发布

阅读量656

点赞数

分类专栏： d3.js 文章标签： d3.js

d3.js 专栏收录该内容

14 篇文章

订阅专栏

本文通过实例演示了如何使用D3.js将数据绑定到DOM元素上，并展示了如何利用这些绑定的数据更新网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.sxt.cn/u/2839/blog/4322

简单例子

　　在这个例子中，你将会使用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" 
        ); 
       
 
 

　　于是，我们得到了：

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

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

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

　　打开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}) 
       
 
 

　　然后我们得到：

　　正如你所看到——我们现在看到了三个包含了我们数据的段落，而不是三个内容是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控制台，运行后得到：

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

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

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

　　在本例中：

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

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

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

　　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     
         }); 
       
 
 