javascript - enter() 选择上的 extra select() 究竟做了什么？

Question

enter() 选择上的额外 select() 究竟做了什么，为什么它没有 selectAll()？

现在我可能应该张贴更多的文字来“满足您的质量标准”，但我很确定这个问题足够精确并且希望不会太愚蠢。我花了几天时间阅读了各种 d3 教程和文档，这部分我还是没看懂。

Answer 1

调用 select在 enter selection 上很少见；使用 append 更为常见或 insert反而。然而，所有这三种方法的最终结果都是相同的:它指定如何实例化输入选择中的元素。

当您执行 data-join 时, 返回三个新选择:

• 更新选择:选择与数据对应的元素
• 退出选择:任何剩余元素(无对应数据)
• 输入选择:任何剩余数据(无对应元素)

由于输入选择是剩余数据，因此根据定义没有对应的元素。因此，输入选择最初包含占位符节点，您必须将其实例化为适当的元素。您几乎看不到这些节点，因为您会立即告诉 D3 如何创建缺失的元素，通常是通过调用追加或插入。这些方法创建新元素并将它们插入到 DOM 中。 (父节点由前面的 select 确定，如 nested selections 教程中所述。)

在极少数情况下，您可能想要执行超出标准追加或插入以实例化输入节点的操作。例如，标准的 append 方法总是创建同名元素(例如“div”或“rect”)。如果您想动态指定名称，您可以改用 select 并传入一个函数来创建新元素(如 this thread in the d3-js mailing list 中所讨论):

enterSelection.select(function(d) {
  return this.appendChild(document.createElement(d.name));
});

事实上，如果你看how append is implemented ，您会看到它只是 select 之上的包装器。一个稍微简化的实现是:

d3.selection.prototype.append = function(name) {
  return this.select(function() {
    return this.appendChild(document.createElement(name));
  });
};

这些示例实现得到了简化，因为它们不处理带命名空间的 SVG 元素。因此，使用内置方法更容易，这些示例仅用于解释 D3 的内部工作方式。