d3.js selector not returning actual object

Question

I am using d3.js v4. I have executed following code on google chrome browser's console.

var theData = [ 1, 2, 3 ]

var p = d3.select("body").selectAll("p")
          .data(theData)
          .enter()
          .append("p")
          .text("hello ");

console.log(p);

I was expecting a result like this:

But what I am getting is as shown below

Can someone please help me why this difference is there?

Answer 1

According to D3 4.x API:

Selections no longer subclass Array using prototype chain injection; they are now plain objects, improving performance.

So, in D3 version 4.x, selections are objects.

Also, it's worth mentioning that you're using the compressed version (https://d3js.org/d3.v4.min.js), which returns:

zi {_groups: Array[1], _parents: Array[1]}

In the normal version (https://d3js.org/d3.v4.js), the console.log return should be:

Selection {_groups: Array[1], _parents: Array[1]}

If you want to get something similar to what you had in D3 v3, use nodes():

var theData = [ 1, 2, 3 ]

var p = d3.select("body").selectAll("p")
          .data(theData)
          .enter()
          .append("p")
          .text("hello ");

console.log(p.nodes());

<script src="https://d3js.org/d3.v4.js"></script>