enter()选择中的额外select()究竟是做什么的？

Question

输入()选择中的额外select()究竟做了什么,为什么没有selectAll()？

现在我可能会发布更多文字以"达到你的质量标准",但我确信这个问题足够精确,希望不要太愚蠢.我花了几天时间阅读各种d3教程和文档,这部分仍然从我身上逃脱.

Answer 1

在输入选择上调用选择很少见; 使用append或insert更常见.然而,所有这三种方法的最终结果是相同的:它指定了如何在输入选择中实例化元素.

执行数据连接时,将返回三个新选择:

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

由于输入选择是剩余数据,因此根据定义没有相应的元素.因此,输入选择最初包含占位符节点,您必须将其实例化为适当的元素.您几乎从不会看到这些节点,因为您通常会通过调用append或insert来告诉D3如何创建缺少的元素.这些方法创建新元素并将它们插入DOM.(父节点由前一个选择确定,如嵌套选择教程中所述.)

在极少数情况下,您可能希望执行超出标准附加或插入的操作以实例化输入节点.例如,标准append方法总是创建相同名称的元素(例如"div"或"rect").如果要动态指定名称,可以使用select而不是传入函数来创建新元素(如d3-js邮件列表中的此线程所述):

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

实际上,如果你看一下如何实现append,你会发现它只是select之上的一个包装器.稍微简化的实现是:

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

这些示例实现被简化,因为它们不处理命名空间的SVG元素.因此,使用内置方法更容易,这些示例仅用于解释D3如何在内部工作.