D3.js 中的 Selection API

选择是功能强大的 DOM（文档对象模型）的数据驱动转换。 它可以应用于设置文本内容或 HTML、属性、样式、属性等。本 D3.js 章节将帮助您了解选择 API。

API 配置

我们可以使用以下脚本来配置 API。

选择 API 的方法

选择 API 的基本方法如下所示。

• d3.selection
• d3.selectAll(selector)
• d3.select(selector)
• selection.selectAll(selector)
• selection.merge(other)
• selection.filter(filter)
• d3.creator(name)
• d3.matcher(selector)
• selection.call(function[, arguments?])
• selection.each(function)
• d3.local()
• local.get(node)
• local.set(node,value)
• local.remove(node)

让我们详细讨论上述方法。

d3.selection

选择 API 有一个 d3.selection 方法，它用于选择房间组件。它也可以用于扩展任何选择 d3js 或测试选择。

d3.selectAll(selector)

此选择 API 方法可以选择与指定的字符串选择器相同的每个组件。

语法

让我们考虑一个例子。

示例

输出

d3.select(selector)

它定义了与指定的字符串选择器相同的第一个组件的选择用法。

语法

让我们考虑一个例子。

示例

输出

selection.selectAll(selector)

它是选择 API 的另一种方法，它说明了组件选择的用法。它可以选择与指定的字符串选择器相同的后代组件。在任何返回的选择中，组件由选择中相关的父节点组合在一起。

如果没有组件（与最新组件的描述选择器相同），或者选择器为 null，则对最新索引的集合将为空。

语法

selection.merge(other)

它将返回一个唯一选择，与描述的另一个选择合并。

语法

selection.filter(filter)

它适用于选择过滤器，并将返回一个唯一选择，其中仅包括指定过滤器给出值 true 的组件。

语法

d3.creator(name)

它可以应用于分配指定组件名称。它将给出一个函数，该函数将制作所提供名称的组件，假设它是一个父组件。

语法

d3.matcher(selector)

此选择 API 方法分配指定的选择器。它将给出一个函数，该函数将返回 true 值。

selection.call(function[, arguments?])

它仅调用指定的函数一次。

语法

selection.each(function)

它将任何指定的函数调用到所有选定的组件，按照由最新组（节点）、最新索引（i）和最新数据（d）传递的顺序，作为最新的 DOM 组件（node[I]）。

它描述如下

d3.local()

它允许我们描述任何本地状态，即与数据无关。

每个局部值也可以由 DOM 观察到。

local.set(node,value)

它可以设置指定节点的局部值。

local.remove(node)

选择 API 具有另一个重要方法，即 local.remove(node)。 它可以从指定节点中删除本地值。 当节点被表示时，它将给出 true 值。 否则，它将返回 false 值。