selection.data() throws TypeError when selection is created from a DOM element

[Danial-Sadiq-Masood]

Description

Calling data() on a selection created from a DOM element appears to fail when D3 attempts to create EnterNodes.
The following works:

d3.select('#app').data([1, 2, 3, 4]);

but the equivalent selection created from the DOM element itself throws:

d3.select(document.getElementById('app')).data([1, 2, 3, 4]);

Uncaught TypeError: Cannot read properties of null (reading 'ownerDocument') at new EnterNode (d3-selection.js?v=2f31b0b4:142:30) at bindIndex (d3-selection.js?v=2f31b0b4:177:20)...

Shouldn't both snippets result in indentical execution?

Reproduction

<div id="app"></div>
<script>
  d3.select(document.getElementById('app'))
    .data([1, 2, 3, 4]);
</script>

Environment

d3-selection : 3.0.0
browser : Chrome Version 147.0.7727.55 (Official Build) (64-bit)

[mbostock]

You can see the difference in the implementation of d3.select:

export default function(selector) {
  return typeof selector === "string"
      ? new Selection([[document.querySelector(selector)]], [document.documentElement])
      : new Selection([[selector]], root);
}

Here root is [null]. It’s not fully documented, but it explains why they don’t have equivalent behavior.

In general, you shouldn’t be calling selection.data immediately following d3.select; selection.data only makes sense when you have a parent element defined, and a selection of zero or more elements. A more common pattern would therefore be:

d3.select("#app").selectAll("div").data([1, 2, 3, 4])

See the Joining data documentation for more.

[Danial-Sadiq-Masood]

Do you wish to add this case to the documentation? I would love to assist if possible. Or do you think it is such an edge case that is doesn't really matter?