修改元素

选择元素后，使用选择器来修改元素。例如，要设置当前文档中所有段落元素的类和颜色样式

d3.selectAll("p")
    .attr("class", "graf")
    .style("color", "red");

选择方法通常返回当前选择器或一个新选择器，允许通过方法链对给定选择器应用多个操作。上面的代码等价于

const p = d3.selectAll("p");
p.attr("class", "graf");
p.style("color", "red");

选择器是不可变的。所有影响元素选择（或其顺序）的选择方法都会返回一个新选择器，而不是修改当前选择器。但是，请注意，元素一定是可变的，因为选择器驱动着文档的转换！

selection.attr(name, value)

源代码 · 如果指定了 value，则在选定元素上将具有指定 name 的属性设置为指定的值，并返回此选择器。

selection.attr("color", "red")

如果 value 是一个常量，则所有元素都将获得相同的属性值；否则，如果 value 是一个函数，则会按顺序针对每个选定元素进行评估，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素 (nodes[i])。然后，函数的返回值将用于设置每个元素的属性。空值将删除指定的属性。

selection.attr("color") // "red"

如果没有指定 value，则返回选择器中第一个（非空）元素的指定属性的当前值。这通常仅在您知道选择器只包含一个元素时才有用。

指定的 name 可能包含命名空间前缀，例如 xlink:href 用于指定 XLink 命名空间中的 href 属性。有关支持的命名空间映射，请参阅命名空间；可以通过将更多项添加到映射中来注册其他命名空间。

selection.classed(names, value)

源代码 · 如果指定了 value，则通过设置 class 属性或修改 classList 属性，在选定元素上分配或取消分配指定的 CSS 类 names，并返回此选择器。

selection.classed("foo", true)

指定的 names 是一个用空格分隔的类名字符串。例如，要将 foo 和 bar 类分配给选定元素

selection.classed("foo bar", true)

如果 value 为真值，则所有元素都将分配指定的类；否则，将取消分配这些类。

selection.classed("foo", () => Math.random() > 0.5)

如果 value 是一个函数，则会按顺序针对每个选定元素进行评估，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素 (nodes[i])。然后，函数的返回值将用于在每个元素上分配或取消分配类。

selection.classed("foo") // true, perhaps

如果没有指定 value，则仅当第一个（非空）选定元素具有指定的 classes 时，返回 true。这通常仅在您知道选择器只包含一个元素时才有用。

selection.style(name, value, priority)

源代码 · 如果指定了 value，则在选定元素上将具有指定 name 的样式属性设置为指定的值，并返回此选择器。

selection.style("color", "red")

如果 value 是一个常量，则所有元素都将获得相同的样式属性值；否则，如果 value 是一个函数，则会按顺序针对每个选定元素进行评估，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素 (nodes[i])。然后，函数的返回值将用于设置每个元素的样式属性。空值将删除样式属性。还可以指定可选的 priority，可以是 null 或字符串 important（不带感叹号）。

selection.style("color") // "red"

如果没有指定 value，则返回选择器中第一个（非空）元素的指定样式属性的当前值。当前值被定义为元素的内联值（如果存在），否则为其计算值。访问当前样式值通常仅在您知道选择器只包含一个元素时才有用。

注意

与许多 SVG 属性不同，CSS 样式通常具有关联的单位。例如，3px 是一个有效的 stroke-width 属性值，而 3 则不是。某些浏览器会将 px（像素）单位隐式分配给数值，但并非所有浏览器都这样做：例如，IE 会抛出“无效参数”错误！

selection.property(name, value)

源代码 · 一些 HTML 元素具有特殊属性，无法使用属性或样式来访问，例如表单字段的文本 value 和复选框的 checked 布尔值。使用此方法来获取或设置这些属性。

selection.property("checked", true)

如果指定了 value，则在选定元素上将具有指定 name 的属性设置为指定的值。如果 value 是一个常量，则所有元素都将获得相同的属性值；否则，如果 value 是一个函数，则会按顺序针对每个选定元素进行评估，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素 (nodes[i])。然后，函数的返回值将用于设置每个元素的属性。空值将删除指定的属性。

selection.property("checked") // true, perhaps

如果没有指定 value，则返回选择器中第一个（非空）元素的指定属性的值。这通常仅在您知道选择器只包含一个元素时才有用。

selection.text(value)

源代码 · 如果指定了 value，则在所有选定元素上将文本内容设置为指定的值，替换任何现有的子元素。

selection.text("Hello, world!")

如果 value 是一个常量，则所有元素都将获得相同的文本内容；否则，如果 value 是一个函数，则会按顺序针对每个选定元素进行评估，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素 (nodes[i])。然后，函数的返回值将用于设置每个元素的文本内容。空值将清除内容。

selection.text() // "Hello, world!"

如果没有指定 value，则返回选择器中第一个（非空）元素的文本内容。这通常仅在您知道选择器只包含一个元素时才有用。

selection.html(value)

源代码 · 如果指定了 value，则在所有选定元素上将内部 HTML 设置为指定的值，替换任何现有的子元素。

selection.html("Hello, <i>world</i>!")

如果 value 是一个常量，则所有元素都将获得相同的内部 HTML；否则，如果 value 是一个函数，则会按顺序针对每个选定元素进行评估，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素 (nodes[i])。然后，函数的返回值将用于设置每个元素的内部 HTML。空值将清除内容。

selection.html() // "Hello, <i>world</i>!"

如果没有指定 value，则返回选择器中第一个（非空）元素的内部 HTML。这通常仅在您知道选择器只包含一个元素时才有用。

使用 selection.append 或 selection.insert 来创建数据驱动的内容；此方法用于您需要少量 HTML 代码的情况，例如进行丰富的格式化。此外，selection.html 仅支持 HTML 元素。SVG 元素和其他非 HTML 元素不支持 innerHTML 属性，因此与 selection.html 不兼容。考虑使用 XMLSerializer 将 DOM 子树转换为文本。另请参阅 innersvg 填充，它提供了一个垫片来支持 SVG 元素上的 innerHTML 属性。

selection.append(type)

来源 · 如果指定的 type 是一个字符串，则在每个选定元素的最后一个子元素之后追加一个新的此类型元素（标签名称），或者如果这是进入选择，则在更新选择中的下一个后续同级元素之前。进入选择的后一种行为允许您以与新绑定数据一致的顺序将元素插入 DOM；但是，请注意，如果更新元素改变顺序（即，如果新数据的顺序与旧数据不一致），则可能仍然需要 selection.order。

如果指定的 type 是一个函数，则会按顺序为每个选定元素对其进行评估，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 是当前 DOM 元素 (nodes[i])。此函数应该返回要追加的元素。（该函数通常创建一个新元素，但它也可以返回一个现有元素。）例如，要向每个 DIV 元素追加一个段落

d3.selectAll("div").append("p");

这等效于

d3.selectAll("div").append(() => document.createElement("p"));

这等效于

d3.selectAll("div").select(function() {
  return this.appendChild(document.createElement("p"));
});

在这两种情况下，此方法都返回一个包含追加元素的新选择。每个新元素都继承当前元素的数据（如果有），其方式与 selection.select 相同。

指定的 name 可以具有命名空间前缀，例如 svg:text 用于指定 SVG 命名空间中的 text 属性。有关支持命名空间的映射，请参阅命名空间；可以通过添加到映射中来注册其他命名空间。如果没有指定命名空间，则将从父元素继承命名空间；或者，如果名称是已知前缀之一，则将使用相应的命名空间（例如，svg 意味着 svg:svg）。

selection.insert(type, before)

来源 · 如果指定的 type 是一个字符串，则在每个选定元素的第一个与指定的 before 选择器匹配的元素之前插入一个新的此类型元素（标签名称）。例如，before 选择器 :first-child 将在第一个子元素之前添加节点。如果未指定 before，则默认值为 null。（要以与绑定数据一致的顺序追加元素，请使用 selection.append。）

type 和 before 都可以指定为按顺序为每个选定元素进行评估的函数，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 是当前 DOM 元素 (nodes[i])。type 函数应该返回要插入的元素；before 函数应该返回应在该元素之前插入元素的子元素。例如，要向每个 DIV 元素追加一个段落

d3.selectAll("div").insert("p");

这等效于

d3.selectAll("div").insert(() => document.createElement("p"));

这等效于

d3.selectAll("div").select(function() {
  return this.insertBefore(document.createElement("p"), null);
});

在这两种情况下，此方法都返回一个包含追加元素的新选择。每个新元素都继承当前元素的数据（如果有），其方式与 selection.select 相同。

selection.remove()

来源 · 从文档中删除选定元素。返回此选择（已删除的元素），这些元素现在已从 DOM 中分离。目前没有专用的 API 用于将已删除的元素添加回文档；但是，您可以将函数传递给 selection.append 或 selection.insert 以重新添加元素。

selection.clone(deep)

来源 · 在选定元素的紧随其后的位置插入选定元素的克隆，并返回一个包含新添加克隆的选择。如果 deep 为真，则还会克隆选定元素的后代节点。否则，只克隆元素本身。等效于

selection.select(function() {
  return this.parentNode.insertBefore(this.cloneNode(deep), this.nextSibling);
});

selection.sort(compare)

来源 · 返回一个新选择，其中包含此选择中每个组的副本，这些副本根据 compare 函数进行排序。排序后，重新插入元素以匹配结果顺序（根据 selection.order）。

要比较的函数，其默认值为 ascending，传递两个元素的数据 a 和 b 进行比较。它应该返回负值、正值或零值。如果为负值，则 a 应该在 b 之前；如果为正值，则 a 应该在 b 之后；否则，a 和 b 被视为相等，顺序是任意的。

selection.order()

来源 · 将元素重新插入文档中，以便每个组的文档顺序与选择顺序匹配。如果数据已排序，这等效于调用 selection.sort，但速度要快得多。

selection.raise()

来源 · 按顺序将每个选定元素重新插入其父元素的最后一个子元素中。等效于

selection.each(function() {
  this.parentNode.appendChild(this);
});

selection.lower()

来源 · 按顺序将每个选定元素重新插入其父元素的第一个子元素中。等效于

selection.each(function() {
  this.parentNode.insertBefore(this, this.parentNode.firstChild);
});

create(name)

来源 · 给定指定的元素 name，返回一个包含当前文档中给定名称的已分离元素的单元素选择。此方法假定 HTML 命名空间，因此您必须在创建 SVG 或其他非 HTML 元素时显式指定命名空间；有关支持命名空间前缀的详细信息，请参阅命名空间。

d3.create("svg") // equivalent to svg:svg

d3.create("svg:svg") // more explicitly

d3.create("svg:g") // an SVG G element

d3.create("g") // an HTML G (unknown) element

creator(name)

来源 · 给定指定的元素 name，返回一个创建给定名称的元素的函数，假定 this 是父元素。此方法在 selection.append 和 selection.insert 内部使用，以创建新元素。例如，这

selection.append("div");

等效于

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

有关支持命名空间前缀（例如，用于 SVG 元素）的详细信息，请参阅命名空间。

d3-chord

d3-interpolate

d3-contour

d3-delaunay

d3-force

d3-geo

投影

d3-hierarchy

d3-scale

d3-scale-chromatic

d3-selection

d3-shape

d3-transition

d3-array

修改元素

selection.attr(name, value)

selection.classed(names, value)

selection.style(name, value, priority)

selection.property(name, value)

selection.text(value)

selection.html(value)

selection.append(type)

selection.insert(type, before)

selection.remove()

selection.clone(deep)

selection.sort(compare)

selection.order()

selection.raise()

selection.lower()

create(name)

creator(name)

投影

修改元素 ​

selection.attr(name, value) ​

selection.classed(names, value) ​

selection.style(name, value, priority) ​

selection.property(name, value) ​

selection.text(value) ​

selection.html(value) ​

selection.append(type) ​

selection.insert(type, before) ​

selection.remove() ​

selection.clone(deep) ​

selection.sort(compare) ​

selection.order() ​

selection.raise() ​

selection.lower() ​

create(name) ​

creator(name) ​

修改元素

selection.attr(name, value)

selection.classed(names, value)

selection.style(name, value, priority)

selection.property(name, value)

selection.text(value)

selection.html(value)

selection.append(type)

selection.insert(type, before)

selection.remove()

selection.clone(deep)

selection.sort(compare)

selection.order()

selection.raise()

selection.lower()

create(name)

creator(name)