logo图片
D3JS教程

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) 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)为空,则当前索引处的组将为空。
示例-让我们考虑以下示例。
var b = d3.selectAll("p").selectAll("b");

selection.filter(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((selector))

此方法用于分配指定的(selector)。它返回一个函数,该函数返回 true。
示例-让我们考虑以下示例。
var p = selection.filter(d3.matcher("p"));

d3.creator(name)

此方法用于分配指定的元素名称它返回一个函数,该函数创建一个给定名称的元素,假设这是父元素。
示例-让我们考虑以下示例。
selection.append(d3.creator("p"));

selection.each(function)

该方法用于为每个选中的元素调用指定的函数,按照当前数据(d)、当前索引(i)和当前组(节点)传递的顺序,以this为当前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 允许您定义独立于数据的本地状态。
示例-让我们考虑以下示例。
var data = d3.local();
与 var 不同,每个 local 的值也受 DOM 的限制。

local.set(node, value)

此方法将指定节点上的此本地值设置为值。
示例-让我们考虑以下示例。
selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)
此方法返回指定节点上此本地的值。如果节点没有定义这个本地节点,那么它返回定义它的最近祖先的值。

local.remove(node)

此方法从指定节点中删除此本地的值。如果节点定义,则返回真,否则返回假。
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4