[2] D3.js中如何使用資料和選擇元素

標籤：c   style   class   blog   code   a   

對D3.js或資料視覺效果有興趣的朋友歡迎到 www.ourd3js.com 討論。

接著上一講的內容，這次討論如何選擇元素和使用資料。
現在頁面中有三行文字，代碼為：

<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){<span style="white-space:pre"></span>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，怎麼辦呢？

    有兩種方法：

    一、為第三個p賦予一個id，即

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

    再選擇

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

再進行操作即可。

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

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