初學d3.js (1);

第一次玩博客,不知道該怎麼寫,廢話很少說,下面我開始總結d3中,我一邊學一邊跟你們分項的內容.

相信你們對jQuery都不陌生,d3實際上操做方式和jQuery同樣,也是打. 也支持鏈式寫法,

1/ 選擇器

在D3中,選擇器也和jq同樣,用select(); 和selectAll(); 裏面的值必須是一個字符串,能夠是id名,能夠是類名,若是是類名的話必需要加. ,還能夠是一個元素.

select();只能選擇一個元素,若是個人頁面中有多個元素的話,選擇的會是第一個.

selectAll(); 選擇的是全部的元素.  

select()和sellectAll();返回的都是選擇集,選擇集是和綁定數據一塊兒用的。

實際上還有一種選擇元素集的方法,那就是用 function(d,i){};這個方法,由於i表明的是索引號,因而即可以利用條件語句來指定執行的元素.

2/綁定數據

在d3中綁定數據的辦法有兩種,一種是datum();一種是data(),data是比較經常使用的方式,　

例如:datum()方式綁定數據

var str = "hellow word";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
//會自動傳兩個參數,第一個是d表明的是數據  第二個是i表明的是索引
p.text(function (d, i) {
    return "第" + i + "個元素綁定的數據是" + d;
//若是datum想要實現和data同樣的效果,傳數據的時候,數據要放在一個數組中.在return的時候須要d[i]這樣能夠把數組中的各項調用出來
});

例如:data()方式綁定數據

var dataset = [" I Like Dog", "I Like Cat", "I Like Pig"];var p = d3.select("body").selectAll("p");p.data(dataset).text(function (d, i) {    return d;})