D3.js: select("body").selectAll("p")和selectAll("p")之间的区别？

Question

有谁知道有什么不同吗？

我的理解是两者都会返回相同的选择。

然而，当我做一个附加操作时，如果我使用selectAll("p")，它就不能工作。

例如，这是可行的：

var foo = d3.select("body")
            .selectAll("p")
            .data([1, 2, 3, 4]);

foo.enter.append("p")

虽然这不起作用：

var foo = d3.selectAll("p")
            .data([1, 2, 3, 4]);

foo.enter.append("p")

为什么后者不起作用？

Answer 1

这里的简短答案是：“因为没有什么可以追加的。”虽然d3.selectAll("p")和d3.select("body").selectAll("p")将选择相同的现有节点是正确的，但是选择body元素首先会为使用.append()方法添加的新节点设置上下文。

如果不选择body，就没有办法在DOM树中插入节点--我猜测d3试图将新节点附加到document对象，这会导致HIERARCHY_REQUEST_ERROR discussed here。