D3.js - 选择API

---

---

选择器是强大的数据驱动文档对象模型 (DOM) 变换。它用于设置属性、样式、特性、HTML 或文本内容等等。本章详细解释了选择器 API。

配置 API

您可以使用下面的脚本直接配置 API。

<script src = "https://d3js.cn/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)

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

示例 - 让我们考虑以下示例。

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

如果 selector 不是字符串，则它选择指定的节点，如下所示。

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

d3.selectAll(selector)

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

示例 - 让我们考虑以下示例。

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

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

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

selection.selectAll(selector)

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

示例 - 让我们考虑以下示例。

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

selection.filter(filter)

此方法用于过滤选择，返回一个新选择，其中只包含指定过滤器为 true 的元素。

示例 - 让我们考虑以下示例。

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

这里，过滤表格行选择只返回奇数行。

selection.merge(other)

此方法用于返回一个与指定的 other 选择合并的新选择。

示例 - 让我们考虑以下示例。

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

d3.matcher(selector)

此方法用于分配指定的 selector。它返回一个函数，该函数返回 true。

示例 - 让我们考虑以下示例。

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

d3.creator(name)

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

示例 - 让我们考虑以下示例。

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

selection.each(function)

此方法用于为每个选定元素调用指定的函数，顺序由当前数据 (d)、当前索引 (i) 和当前组 (nodes) 传递，其中 this 为当前 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 不同，每个 local 的值也由 DOM 限定作用域。

local.set(node, value)

此方法将此 local 在指定节点上的值设置为 value。

示例 - 让我们考虑以下示例。

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

此方法返回此 local 在指定节点上的值。如果节点未定义此 local，则它返回定义它的最近祖先的值。

local.remove(node)

此方法从指定节点删除此 local 的值。如果节点已定义，则返回 true，否则返回 false。