D3 v5 学习笔记-1 选择器

D3.js 是基于数据操作文档的 JavaScript 库，通过 HTML、SVG 和 CSS 赋予数据以生命。D3 集强力的可视化组件与数据驱动型的 DOM 操作手法于一身，能最大限度地引出现代浏览器的性能，而不必束缚于特定的框架。

在DOM操作这边，D3的API有很浓重jQuery风格，比如接受一个参数为get，接受两个参数为set，选择集支持链式操作，有专门的class类名操作等等。

1.选择元素

Selections (d3-selection)

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.数据绑定

Joining Data

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.元素操作

Modifying Elements

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