D3.js学习1

学习d3.js
一.d3.js是链式语法,使用规则是选择元素(一个或多个)然后设置其属性或者样式。
二.常用方法:

1. d3.select():使用CSS选择器语法从DOM中选择单一元素。
如:d3.select("body");

2. d3.selectAll():选择所有符合要求的元素。
如:d3.select("body").selectAll("p");//选中body中所有的p元素

3. selection.append():创建元素,并追加到选集(selection)的尾部。
如:d3.select("body").append("p");//创建p元素,并追加到body的子元素中最后一个

4. selection.text():设置文字内容。
如:d3.select("body").append("p").text("New");//为p元素添加文字内容

5. selection.data():把数据绑定到DOM元素上,数值会存储在DOM元素的__data__属性中
如:d3.select("body").selectAll("p").data(dataset);

6. selection.enter():创建新的绑定数据的元素时需要使用该方法,它首先检查DOM,然后将数据传递给DOM,如果数值数量多于对应的DOM元素,则该方法会创建新的占位元素,并将其链接向下传递
如:d3.select("body").selectAll("p").data(dataset).enter().append("p").text("New paragraph!");

7. selection.style():改变CSS样式
如:d3.select("div").style("height", “10px”);

8. attr():改变HTML属性值的方法
如:d3.select("div").attr("class", "bar");

9. selection.classed():快速从元素中应用或移除类的方法
如:d3.select("div").classed("bar", true);

参考:http://my.oschina.net/warmcafe/blog/114012

posted @ 2013-08-27 13:50  头头胖胖  阅读(411)  评论(0编辑  收藏  举报