D3.js - 选择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)

• 选择.merge(其他)

• d3.matcher(选择器)

• d3.creator(姓名)

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

此方法用于选择与指定选择器字符串匹配的第一个元素.

示例 : 让我们考虑以下示例.

 
 var body = d3.select("body");

如果选择器不是字符串，则它选择指定的节点，该节点在下面定义.

 
 d3.select("p").style("color"，"red");

d3.selectAll(selector)

此方法选择与指定选择器字符串匹配的所有元素.

示例 : 让我们考虑以下示例.

 
 var body = d3.selectAll("body");

如果选择器不是字符串，则它选择指定的节点数组，如下所示.

 
 d3.selectAll("body").style("color"，"red");

selection.selectAll(selector)

此方法用于选择元素.它选择与指定选择器字符串匹配的后代元素.返回选择中的元素按此选择中的相应父节点分组.如果没有元素匹配当前元素的指定选择器，或者选择器为null，则当前索引处的组将为空.

示例 : 让我们考虑以下示例.

 
 var b = d3.selectAll("p").selectAll("b");

selection.filter(过滤器)

此方法用于过滤选择，返回包含的新选择只有指定过滤器为真的元素.

示例 : 让我们考虑以下示例.

 
 var even = d3.selectAll("tr").filter(":nth-child(odd) ");

这里，过滤一系列表行只返回奇数.

selection.merge(other)

此方法用于返回与指定的其他选择合并的新选择.

示例 : 让我们考虑以下示例.

 
 var rect = svg.selectAll("rect").data(data); 
 rect.enter().append("rect").merge(rect);

d3.matcher(选择器)

此方法用于分配指定的选择器.它返回一个返回true的函数.

示例 : 让我们考虑以下示例.

 
 var p = selection.filter(d3.matcher("p"));

d3.creator(name)

此方法用于分配指定的元素名称它返回一个函数，假设这是父元素，它会创建给定名称的元素.

示例 : 让我们考虑以下示例.

 
 selection.append(d3.creator("p"));

selection.each(function)

此方法用于为每个选定的元素调用指定的函数，由当前数据(d)，当前索引(i)和当前组(节点)传递的顺序，其中此作为当前DOM元素(nodes [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允许您定义独立于数据的本地状态.

示例 : 让我们考虑以下示例.

 
 var data = d3.local();

与var不同，每个本地的值也由DOM限定.

local.set(node，值)

此方法将指定节点上的本地值设置为值.

示例 : 让我们考虑以下示例.

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

此方法返回指定节点上此local的值.如果节点没有定义这个本地，那么它将从最近的祖先返回定义它的值.

local.remove(node)

此方法从指定节点删除此本地值.如果定义了节点，则返回true，否则返回false.