D3 v4 quadtree root is returning undefined - d3.js

Question

I'm using D3 v4 and can't get quadtree to work. It keeps returning undefined for the root. I don't think it likes the data I'm giving it.
const Nodes = [];
for (let i = 0; i < 10; i++) {
Nodes.push({
radius: 5,
x: Math.random() * 500,
y: Math.random() * 500,
velocityX: Math.random(),
velocityY: Math.random()
});
}
collide() {
var quadtree = d3.quadtree().extent([
[
0, 0
],
[1500, 1000]
]).addAll(Nodes);
console.log(quadtree);
}

Answer 1

Let's have a look at any given object in your Nodes array:
[{
radius: 5,
x: 301.25792388143293,
y: 35.626900264457696,
velocityX: 0.43542026096574715,
velocityY: 0.03662733324854717
}]
As you can see, the x and y coordinates are defined in properties with "x" and "y" as key.
However, this is the default function for the x coordinate in d3.quadtree:
function x(d) {
return d[0];
}
And for the y coordinate:
function y(d) {
return d[1];
}
As you can see, those functions won't work with your object structure.
Solution:
Set the x and y coordinates according to your object:
var quadtree = d3.quadtree()
.x(function(d) {
return d.x
})
.y(function(d) {
return d.y
})
Here is your code with that change, check the console:
const Nodes = [];
for (let i = 0; i < 10; i++) {
Nodes.push({
radius: 5,
x: Math.random() * 500,
y: Math.random() * 500,
velocityX: Math.random(),
velocityY: Math.random()
});
}
var quadtree = d3.quadtree().extent([
[
0, 0
],
[1500, 1000]
]).x(function(d) {
return d.x
})
.y(function(d) {
return d.y
})
.addAll(Nodes);
console.log(quadtree);
<script src="https://d3js.org/d3.v4.min.js"></script>