d3.js学习笔记（未完待续）

d3.js和jQuery一样，是链式语法。

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);

上面的函数是我在示例学习的时候用到的常用函数。更多的函数可以参见d3的官方API检索。

来源：oschina

链接：https://my.oschina.net/u/249274/blog/114012

标签