? ? 本人的個人博客首頁為：?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，怎么辦呢？

? ? 有兩種方法：

? ? 一、為第三個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){....} });

轉載于:https://www.cnblogs.com/blfshiye/p/5401239.html

總結

以上是生活随笔為你收集整理的【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。