为什么在 D3.js 中使用 selectAll(null) 来追加元素？

选择 null：为什么在 D3 中使用 selectAll(null)？

背景

在 D3 中，经常会看到这样的模式：

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

这段代码将元素附加到 DOM，但是为什么使用 selectAll(null) 呢？对于特定元素不应该是 selectAll("circle") 或 selectAll("p") 吗？

回车选择

D3.js 中“回车”选择的说明：

将数据绑定到元素时，存在三种情况：

1. 元素和数据点数量相等。
2. 元素数量多于数据点。
3. 数据点多于元素。

在场景 #3 中，没有对应元素的数据点属于“输入”选择。在“输入”选择中使用追加会为不匹配的数据创建新元素。

绑定到现有元素

建议的代码片段 var Circles = svg.selectAll("circle").data(data ) 选择数据并将其绑定到现有圈子。随后的 Enter() 调用处理没有匹配元素的数据点。

使用 selectAll(null)

虽然在不存在圆圈时使用 selectAll("circle") 可以工作，但使用 selectAll(null) 可以提供一致保证“输入”选择始终对应于数据数组中的元素。这种方法确保为所有不匹配的数据点附加新元素。

结论

下面的示例演示了如何使用 selectAll(null) 将段落附加到正文：

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

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