2

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

现在，我可能应该在这里发布更多文字以“满足您的质量标准”，但我很确定这个问题足够精确，希望不会太愚蠢。我花了几天时间阅读各种 d3 教程和文档，这部分仍然从我这里逃脱。

4

2 回答 2

8

在enter 选择上调用select是很少见的；使用追加或插入更为常见。然而，这三种方法的最终结果是相同的：它指定了如何在 enter selection 中实例化元素。

执行data-join时，将返回三个新选择：

  • 更新选择：选择的元素对应的数据
  • 退出选择：任何剩余元素（无对应数据）
  • enter 选择：任何剩余数据（没有对应的元素）

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

在极少数情况下，您可能想要做一些超出标准附加或插入的操作来实例化输入节点。例如，标准的 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 内部的工作原理。

于 2012-09-08T22:48:45.587 回答
2

调用.select()一个.enter()选择与对其他选择的作用相同——您可以使用它来进一步缩小您选择的范围。拥有.selectAll()并没有真正的意义，因为.enter()选择指的是实际上还没有的东西。因此，您只能再次选择整个选择（因为没有显着特征）。

于 2012-09-06T18:28:21.803 回答