D3.js 入门系列 --- 2 如何使用数据和选择元素

Posted 冷雨恋晴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了 D3.js 入门系列 --- 2 如何使用数据和选择元素相关的知识,希望对你有一定的参考价值。

接着上一讲的内容,这次讨论如何选择元素和使用数据。
    现在页面中有三行文字,代码为:

[html] view plain copy
 
  1. <p>Hello World 1</p>  
  2. <p>Hello World 2</p>  
  3. <p>Hello World 3</p>  


    定义一个集合set,里面有三个元素:

 

 

[html] view plain copy
 
  1. var set = ["I like dog","I like cat","I like snake"];  


    要用这三个字符串给分别给上面的三个<p>赋值,代码如下:

 

 

[html] view plain copy
 
  1. var sp = d3.select("body").selectAll("p");   //选择元素  
  2. sp.data(set)             //使用数据集合  
  3. .text(function(d,i){  
  4. return d;  
  5. });   

    上面第一行表示的是选择body里的所有p,再将这个集合赋值给一个变量p。第二行是表明要使用数据集合set,第三行表示要改变p里的文本内容。注意到后面有一个函数function(d,i),这是为了分别使用数据集合set里的元素。

 

    如果不适用数据集合set,想要将所有文本都变为相同的字符串(如都变成China),只需:

 

[html] view plain copy
 
  1. sp.text("China");  

    即可。如果要使用集合分别赋值,要使用函数function(d,i),这个函数的第一个参数的意思是datum(数据),第二个参数的意思是index(索引),要注意,当使用数据函数data指定了数据后,数据集合set和你选择的p集合是一一对应的(如果set和p的数量正好一致的情况,不一样的情况以后再讨论)。函数里面只有一个语句 return d; , 表示直接返回数据,意思是对于每一个索引i,都直接返回数据d。 d3.js会自动按先后顺序为各个p赋值的。

 

    结果如下图:

技术分享

 

    如果我们想只选择其中一个元素进行操作,假设只想操作Hello World 3,怎么办呢?

    有两种方法:

    一、为第三个p赋予一个id,即

 

[html] view plain copy
 
  1. <id="p3">Hello World 3</p>  

    再选择

 

 

[html] view plain copy
 
  1. var sp = d3.select("body").select("#p3");   //选择元素  

再进行操作即可。

 

 

   二、在function(d,i)里操作,例如

 

[html] view plain copy
 
  1. sp.text(function(d,i){  
  2.     if(i==2){  
  3.      ....  
  4.     }  
  5. });   




 

 

来自:博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/。转载请注明出处,谢谢。

以上是关于 D3.js 入门系列 --- 2 如何使用数据和选择元素的主要内容,如果未能解决你的问题,请参考以下文章

D3.js 入门系列 — 11 入门总结

D3.js 入门系列 — 0 简介和安装

D3.js 入门系列 --- 6 如何让图表动起来

D3.js 入门系列 --- 5 如何添加坐标轴

D3.js 入门系列 --- 9.4 集群图的制作

D3.js 入门系列 --- 2.1 关于怎样选择,插入,删除元素