【 D3.js 入門系列 --- 2 】 怎樣使用數據和選擇元素

    本人的我的博客首頁爲： http://www.ourd3js.com/  ，csdn博客首頁爲：http://blog.csdn.net/lzhlzz/。

轉載請註明出處，謝謝。

    接着上一講的內容，此次討論怎樣選擇元素和使用數據。
    現在頁面中有三行文字。代碼爲：

<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裏的文本內容。注意到後面有一個函數funciont(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){
	 ....
	}
});