📜  D3.js-选择API

📅  最后修改于: 2020-10-26 06:11:23             🧑  作者: Mango


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

配置API

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



选择API方法

以下是选择API中最重要的方法。

  • d3.selection()
  • d3.select(选择器)
  • d3.selectAll(选择器)
  • selection.selectAll(选择器)
  • selection.filter(过滤器)
  • selection.merge(其他)
  • d3.matcher(选择器)
  • d3.creator(名称)
  • selection.each(函数)
  • selection.call(函数[,参数…])
  • d3.local()
  • local.set(节点,值)
  • local.get(节点)
  • local.remove(节点)

现在让我们详细讨论每个。

d3.selection()

此方法用于选择根元素。此函数还可用于测试选择或扩展选择d3js。

d3.select(选择器)

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

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

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

如果选择器不是字符串,那么它将选择指定的节点,该节点在下面定义。

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

d3.selectAll(选择器)

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

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

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

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

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

selection.selectAll(选择器)

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

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

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

selection.filter(过滤器)

此方法用于过滤选择,返回一个新选择,该选择仅包含指定过滤器为true的元素。

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

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

在这里,过滤选择的表行仅返回奇数。

selection.merge(其他)

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

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

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(名称)

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

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

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

selection.each(函数)

此方法用于按当前基准(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 name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

可以如下所示指定此方法。

d3.selectAll("p").call(name, "Adam", "David");

d3.local()

D3本地允许您定义独立于数据的本地状态。

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

var data = d3.local();

与var不同,每个局部变量的值也受DOM限制。

local.set(节点,值)

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

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

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

此方法返回指定节点上此本地的值。如果节点未定义此局部,则它将从定义它的最近祖先返回该值。

local.remove(节点)

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