Selection API
选择是文档对象模型（DOM）的强大数据驱动转换。 它用于设置属性，样式，属性，HTML或文本内容等等。 本章详细介绍了选择API。
配置API
您可以使用下面的脚本直接配置API。
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>
</script>
选择API方法
以下是选择API中最重要的方法。
- d3.selection()
- d3.select(selector)
- d3.selectAll(selector)
- selection.selectAll(selector)
- selection.filter(filter)
- selection.merge(other)
- d3.matcher(selector)
- d3.creator(name)
- selection.each(function)
- selection.call(function[, arguments…])
- d3.local()
- local.set(node, value)
- local.get(node)
- local.remove(node)
现在让我们详细讨论其中的每一个。
d3.selection()
此方法用于选择根元素。 此功能还可用于测试选择或扩展选择d3js。
d3.select(selector)
此方法用于选择与指定选择器字符串匹配的第一个元素。
Example - 让我们考虑以下示例。
var body = d3.select("body");
如果选择器不是字符串，则它选择指定的节点，该节点在下面定义。
d3.select("p").style("color", "red");
d3.selectAll(selector)
此方法选择与指定选择器字符串匹配的所有元素。
Example - 让我们考虑以下示例。
var body = d3.selectAll("body");
如果选择器不是字符串，则它选择指定的节点数组，如下所述。
d3.selectAll("body").style("color", "red");
selection.selectAll(selector)
此方法用于选择元素。 它选择与指定选择器字符串匹配的后代元素。 返回选择中的元素按此选择中的相应父节点分组。 如果没有元素与当前元素的指定选择器匹配，或者选择器为null，则当前索引处的组将为空。
Example - 让我们考虑以下示例。
var b = d3.selectAll("p").selectAll("b");
selection.filter(filter)
此方法用于过滤选择，返回仅包含指定过滤器为true的元素的新选择。
Example - 让我们考虑以下示例。
var even = d3.selectAll("tr").filter(":nth-child(odd)");
这里，过滤选择的表行只返回奇数。
selection.merge(other)
此方法用于返回与指定的其他选择合并的新选择。
Example - 让我们考虑以下示例。
var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);
d3.matcher(selector)
此方法用于分配指定的选择器。 它返回一个返回true的函数。
Example - 让我们考虑以下示例。
var p = selection.filter(d3.matcher("p"));
d3.creator(name)
此方法用于分配指定的元素名称它返回一个函数，该函数创建给定名称的元素，假设这是父元素。
Example - 让我们考虑以下示例。
selection.append(d3.creator("p"));
selection.each(function)
此方法用于为当前数据（d），当前索引（i）和当前组（节点）传递的顺序调用每个选定元素的指定函数，并将其作为当前DOM元素（节点[i] ]）。 这将在下面解释。
parent.each(function(p, j) {
d3.select(this)
.selectAll(".child")
.text(function(d, i) { return "child " + d.name + " of " + p.name; });
});
selection.call(function[, arguments…])
它用于仅调用指定的函数一次。 语法如下所示。
function name(selection, first, last) {
selection.attr("first-name", first).attr("last-name", last);
}
可以如下所示指定此方法。
d3.selectAll("p").call(name, "Adam", "David");
d3.local()
D3 local允许您定义独立于数据的本地状态。
Example - 让我们考虑以下示例。
var data = d3.local();
与var不同，每个局部的值也由DOM限定。
local.set(node, value)
此方法将指定节点上此local的值设置为该值。
Example - 让我们考虑以下示例。
selection.each(function(d)
{ data.set(this, d.value); });
local.get(node)
此方法返回指定节点上此local的值。 如果节点未定义此本地，则它返回定义它的最近祖先的值。
local.remove(node)
此方法从指定节点中删除此本地值。 如果定义了节点，则返回true，否则返回false。