There is a code snippet in the tutorials of d3.js. It will create a bar chart in the div.

<body>
<div class="chart">
</div>
</body>

d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });


However, when I tries to modify the selection part to d3.select("div").data(data) or d3.select(".chart).data(data), it fails.

Searching for the reason, and on StackOverflow, there is a post explains the reason.

The implementation of enter.select is then specialized such that nodes are inserted into the group’s parent, replacing the placeholder. This is why it is critical to call selection.selectAll prior to a data join: it establishes the parent node for entering elements.

In other words, calling selectAll('div') at this point is to get the parent node so that append('div') knows where to put it.

So the first selector is to select the DOM element, and the second selector is to get the parent node.