[D3] Using Data Bound To DOM Elements

查看 data 的值:

var pData = d3.select("body").selectAll("p").data([1]).enter().append("p");
pData.data();
// 回傳 [1]

var manyPData = d3.select("body").selectAll("p").data([9, 0, 2, 1, 0]).enter().append("p");
manyPData.data();
// 回傳 [9, 0, 2, 1, 0]

D3 Text Operator

d3.selection.text([value])

d3.selection.text([function]);
d: the __data__ property
i: the element index
this: the DOM reference to the element in question
// 範例 1:
var pData = d3.select("body").selectAll("p").data([1]).enter().append("p");
pData.text("Paragraph Power!");

// 範例 2:
var fivePData = d3.select("body").selectAll("p").data([1, 2, 3, 4, 5]).enter().append("p");
fivePData.text("Paragraph Power");

// 範例 3:放入函式
var fivePData = d3.select("body").selectAll("p").data([1, 2, 3, 4, 5]).enter().append("p");
fivePData.text(function(){ return "Anonymous Function Power!"; });

// 範例 4:取出 d, i
var fivePData = d3.select("body").selectAll("p").data([1, 2, 3, 4, 5]).enter().append("p");
fivePData.text(function(d, i){ return "d:" + d + ", i:" + i; });

會將 “Paragraph Power” 放入 textContent 內,如圖:
Screen Shot 2015-05-26 at 10.35.49 AM

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of