D3.js 是基于数据操作文档的 JavaScript 库，通过 HTML、SVG 和 CSS 赋予数据以生命。D3 集强力的可视化组件与数据驱动型的 DOM 操作手法于一身，能最大限度地引出现代浏览器的性能，而不必束缚于特定的框架。
在DOM操作这边，D3的API有很浓重jQuery风格，比如接受一个参数为get，接受两个参数为set，选择集支持链式操作，有专门的class类名操作等等。
1.选择元素
| API | 描述 | 示例 |
|---|---|---|
| d3.selection() | 选择根元素<html> | d3.selection() |
| d3.select(selector) | 选择一个元素。选择符合选择器的第一个元素 | d3.select("p").style("color", "red") |
| d3.selectAll(selector) | 选择符合条件的所有元素 | d3.selectAll('rect').style("fill", "orange") |
| selection.select.select & selection.selectAll.select | 以上两个API也可以从已存在的选择集中进行查找 | d3.select("body").selectAll("p") |
| selection.filter(filter) | 选择集过滤器 |
var even = d3.selectAll("tr").filter(":nth-child(even)"); 基本等同于： var even = d3.selectAll("tr:nth-child(even)"); 虽然索引值可能不同 |
| selection.merge(other_selection) | 合并两个选择集。要求两个选择集必须有相同的父集 |
circle = circle.enter().append("circle").style("fill", "green").merge(circle).style("stroke", "black");需要结合enter/exit/update理解 |
2.数据绑定
| API | 描述 | 示例 |
|---|---|---|
| selection.datum(one_data) | get or set element data (without joining). （用的比较少，毕竟你只绑定一个数据能做什么嘛……） | body.selectAll("p").datum(str); |
| selection.data(Array) | join elements to data. 常用，常用，常用。 | body.selectAll("p").data(dataset); |
| selection.enter | get the enter selection (data missing elements).获取还没有绑定元素的数据，接下来 |
d3.selectAll("circle").data(data).enter().append("circle")给多出的数据增加circle元素。 |
| selection.exit | get the exit selection (elements missing data).获取选择集中没有绑定数据的元素 |
d3.selectAll("circle").data(data).exit().remove()移除选择集中多于数据的元素circle。 |
3.元素操作
1）添加、删除元素
用过的列表说明，还没用到的直接扔底下了🤦♀️。
| API | 描述 | 示例 |
|---|---|---|
| section.insert() | 同DOM insert，与section同级，在指定元素之前插入 | d3.select("#screen").insert("p", "p:nth-child(3)").text("insert-Element") |
| section.append() | 同DOM append，section是父集 | d3.select("#screen").append("p").text("append Element"); |
| section.remove() | 移除 | d3.select("#screen").select("p").remove(); |
- selection.append - create, append and select new elements.
- selection.insert - create, insert and select new elements.
- selection.remove - remove elements from the document.
- selection.clone - insert clones of selected elements.
- selection.sort - sort elements in the document based on data.
- selection.order - reorders elements in the document to match the selection.
- selection.raise - reorders each element as the last child of its parent.
- selection.lower - reorders each element as the first child of its parent.
- d3.create - create and select a detached element.
- d3.creator - create an element by name.
2）修改元素属性、样式、数据
都是要用的，用法可参考jQuery对应的API。
- selection.attr(key, value) - get or set an attribute.
- selection.classed - get, add or remove CSS classes.
- selection.style(key, value) - get or set a style property.
- selection.property(key, value) - get or set a (raw) property.
- selection.text(txtString) - get or set the text content.
- selection.html(htmlString) - get or set the inner HTML.
一个我还没搞懂的匿名函数：
每个选择集在赋值时支持直接使用一个匿名函数调用它已绑定的data值。
举个栗子🌰：
d3.selectAll("p").data(dataset).text(function(d,i){
return d;
});
// 此时p标签的内容就会更换成绑定的dataset中的内容。
现在可以做什么了？
var dataset = ["I like dogs", "I like cats", "I like snakes"];
// 1.给你一组数据，根据数据显示一组元素：
d3.select("body").selectAll("p").data(dataset).enter().append("p").text(function(d,i){return d});
// 2.删除页面上比数据多的元素：
d3.selectAll("p")[.data(dataset)].exit().remove();
// 3.让页面上的第二个p元素使用红字：
de.select("p:nth-child(2)").style("color", "red");
现在我们有了元素和数据，还有了元素和数据之间的联系，基本材料就准备完毕啦！
