D3.js: Differences between select("body").selectAll("p") and selectAll("p")?

Question

Does anyone know what is the difference?

My understanding is that both would return the same selections.

However when I am doing an append, if I use selectAll("p") it does not work.

For instance, this works:

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

foo.enter.append("p")

While this does does not work:

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

foo.enter.append("p")

Why is it that the latter doesn't work?

score 17 · Accepted Answer · edited May 23 '17 at 12:32

The short answer here is, "Because there's nothing to append to." While you're correct that d3.selectAll("p") and d3.select("body").selectAll("p") will select the same existing nodes, selecting the body element first sets the context for new nodes added with the .append() method.

Without selecting body, you have no point in the DOM tree to insert your nodes - I'm guessing that d3 attempts to append the new nodes to the document object, which results in the HIERARCHY_REQUEST_ERROR discussed here.

D3.js: Differences between select("body").selectAll("p") and selectAll("p")?

1 Answers1