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

接着上一讲的内容，此次讨论如何选择元素和使用数据。
    如今页面中有三行文字，代码为：

<p>Hello World 1</p>
<p>Hello World 2</p>
<p>Hello World 3</p>

    定义一个集合set，里面有三个元素：

 

 

var set = ["I like dog","I like cat","I like snake"];

    要用这三个字符串给分别给上面的三个<p>赋值，代码以下：

 

 

var sp = d3.select("body").selectAll("p");   //选择元素
sp.data(set)             //使用数据集合
.text(function(d,i){
return d;
});

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

 

    若是不适用数据集合set，想要将全部文本都变为相同的字符串（如都变成China），只需：

 

sp.text("China");

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

 

    结果以下图：

 

    若是咱们想只选择其中一个元素进行操做，假设只想操做Hello World 3，怎么办呢？

    有两种方法：

    1、为第三个p赋予一个id，即

 

<p id="p3">Hello World 3</p>

    再选择

 

 

var sp = d3.select("body").select("#p3");   //选择元素

再进行操做便可。

 

 

   2、在function(d,i)里操做，例如

 

sp.text(function(d,i){
    if(i==2){
     ....
    }
});

 

 

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