为什么在 D3.js 中使用 selectAll(null) ？

选择 null：D3.js 中 selectAll(null) 背后的逻辑

在 D3.js 中，你可能会遇到类似这样的代码用于添加 DOM 元素：

var circles = svg.selectAll(null)
    .data(data)
    .enter()
    .append("circle");

虽然选择特定元素很常见，例如“circle”、“p”或“.foo”，但选择“null”可能看起来令人困惑。但是，此技术可确保“输入”选择始终与数据数组相对应，每个数据点对应一个元素。

“输入”选择

“输入”选择包含没有相应 DOM 元素的数据元素。 D3.js 允许将数据绑定到现有 DOM 元素。但是，如果数据点多于 DOM 元素，则多余的数据点属于“回车”选择。在此选择上使用“append”函数会创建新的 DOM 元素，并将数据绑定到它们。

将数据绑定到现有元素

传统上，选择元素绑定如下所示：

var circles = svg.selectAll("circle")
    .data(data);

circles.enter()
.append("circle");

此方法为现有圆形元素创建“更新”选择，而“输入”选择处理没有相应元素的数据点。

;selectAll(null)

但是，无论是否存在现有元素，selectAll(null) 都会返回代表整个数据数组的选择。这可确保“输入”选择始终包含完整的数据集，无论 DOM 的状态如何。

示例

为了说明这个概念，考虑以下示例：

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(d=> "I am a " + d + " paragraph!")
  .style("color", String);

即使没有

最初，selectAll(null) 确保“输入”选择包含所有数据点，并相应地为它们创建段落。

总而言之，selectAll(null) 提供了一致的机制来确保“输入”选择包含所有数据点。 “选择始终与数据数组对齐，无论 DOM 状态如何，数据绑定都变得简单。

以上是为什么在 D3.js 中使用 selectAll(null) ？的详细内容。更多信息请关注PHP中文网其他相关文章！