【 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/。轉載請註明出處，謝謝。