初学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;})