d3quadtree
A quadtree recursively partitions twodimensional space into squares, dividing each square into four equallysized squares. Each distinct point exists in a unique leaf node; coincident points are represented by a linked list. Quadtrees can accelerate various spatial operations, such as the Barnes–Hut approximation for computing manybody forces, collision detection, and searching for nearby points.
Installing
If you use npm, npm install d3quadtree
. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import d3quadtree from Skypack:
<script type="module">
import {quadtree} from "https://cdn.skypack.dev/d3quadtree@3";
const tree = quadtree();
</script>
For legacy environments, you can load d3quadtree’s UMD bundle from an npmbased CDN such as jsDelivr; a d3
global is exported:
<script src="https://cdn.jsdelivr.net/npm/d3quadtree@3"></script>
<script>
const tree = d3.quadtree();
</script>
API Reference
# d3.quadtree([data[, x, y]]) <>
Creates a new, empty quadtree with an empty extent and the default x and yaccessors. If data is specified, adds the specified array of data to the quadtree. This is equivalent to:
const tree = d3.quadtree()
.addAll(data);
If x and y are also specified, sets the x and y accessors to the specified functions before adding the specified array of data to the quadtree, equivalent to:
const tree = d3.quadtree()
.x(x)
.y(y)
.addAll(data);
If x is specified, sets the current xcoordinate accessor and returns the quadtree. If x is not specified, returns the current xaccessor, which defaults to:
function x(d) {
return d[0];
}
The xacccessor is used to derive the xcoordinate of data when adding to and removing from the tree. It is also used when finding to reaccess the coordinates of data previously added to the tree; therefore, the x and yaccessors must be consistent, returning the same value given the same input.
If y is specified, sets the current ycoordinate accessor and returns the quadtree. If y is not specified, returns the current yaccessor, which defaults to:
function y(d) {
return d[1];
}
The yacccessor is used to derive the ycoordinate of data when adding to and removing from the tree. It is also used when finding to reaccess the coordinates of data previously added to the tree; therefore, the x and yaccessors must be consistent, returning the same value given the same input.
# quadtree.extent([extent]) <>
If extent is specified, expands the quadtree to cover the specified points [[x0, y0], [x1, y1]] and returns the quadtree. If extent is not specified, returns the quadtree’s current extent [[x0, y0], [x1, y1]], where x0 and y0 are the inclusive lower bounds and x1 and y1 are the inclusive upper bounds, or undefined if the quadtree has no extent. The extent may also be expanded by calling quadtree.cover or quadtree.add.
Expands the quadtree to cover the specified point ⟨x,y⟩, and returns the quadtree. If the quadtree’s extent already covers the specified point, this method does nothing. If the quadtree has an extent, the extent is repeatedly doubled to cover the specified point, wrapping the root node as necessary; if the quadtree is empty, the extent is initialized to the extent [[⌊x⌋, ⌊y⌋], [⌈x⌉, ⌈y⌉]]. (Rounding is necessary such that if the extent is later doubled, the boundaries of existing quadrants do not change due to floating point error.)
Adds the specified datum to the quadtree, deriving its coordinates ⟨x,y⟩ using the current x and yaccessors, and returns the quadtree. If the new point is outside the current extent of the quadtree, the quadtree is automatically expanded to cover the new point.
Adds the specified array of data to the quadtree, deriving each element’s coordinates ⟨x,y⟩ using the current x and yaccessors, and return this quadtree. This is approximately equivalent to calling quadtree.add repeatedly:
for (let i = 0, n = data.length; i < n; ++i) {
quadtree.add(data[i]);
}
However, this method results in a more compact quadtree because the extent of the data is computed first before adding the data.
Removes the specified datum from the quadtree, deriving its coordinates ⟨x,y⟩ using the current x and yaccessors, and returns the quadtree. If the specified datum does not exist in this quadtree, this method does nothing.
Removes the specified data from the quadtree, deriving their coordinates ⟨x,y⟩ using the current x and yaccessors, and returns the quadtree. If a specified datum does not exist in this quadtree, it is ignored.
# quadtree.copy()
Returns a copy of the quadtree. All nodes in the returned quadtree are identical copies of the corresponding node in the quadtree; however, any data in the quadtree is shared by reference and not copied.
Returns the root node of the quadtree.
Returns an array of all data in the quadtree.
Returns the total number of data in the quadtree.
# quadtree.find(x, y[, radius]) <>
Returns the datum closest to the position ⟨x,y⟩ with the given search radius. If radius is not specified, it defaults to infinity. If there is no datum within the search area, returns undefined.
Visits each node in the quadtree in preorder traversal, invoking the specified callback with arguments node, x0, y0, x1, y1 for each node, where node is the node being visited, ⟨x0, y0⟩ are the lower bounds of the node, and ⟨x1, y1⟩ are the upper bounds, and returns the quadtree. (Assuming that positive x is right and positive y is down, as is typically the case in Canvas and SVG, ⟨x0, y0⟩ is the topleft corner and ⟨x1, y1⟩ is the lowerright corner; however, the coordinate system is arbitrary, so more formally x0 <= x1 and y0 <= y1.)
If the callback returns true for a given node, then the children of that node are not visited; otherwise, all child nodes are visited. This can be used to quickly visit only parts of the tree, for example when using the Barnes–Hut approximation. Note, however, that child quadrants are always visited in sibling order: topleft, topright, bottomleft, bottomright. In cases such as search, visiting siblings in a specific order may be faster.
As an example, the following visits the quadtree and returns all the nodes within a rectangular extent [xmin, ymin, xmax, ymax], ignoring quads that cannot possibly contain any such node:
function search(quadtree, xmin, ymin, xmax, ymax) {
const results = [];
quadtree.visit((node, x1, y1, x2, y2) => {
if (!node.length) {
do {
let d = node.data;
if (d[0] >= xmin && d[0] < xmax && d[1] >= ymin && d[1] < ymax) {
results.push(d);
}
} while (node = node.next);
}
return x1 >= xmax  y1 >= ymax  x2 < xmin  y2 < ymin;
});
return results;
}
# quadtree.visitAfter(callback) <>
Visits each node in the quadtree in postorder traversal, invoking the specified callback with arguments node, x0, y0, x1, y1 for each node, where node is the node being visited, ⟨x0, y0⟩ are the lower bounds of the node, and ⟨x1, y1⟩ are the upper bounds, and returns the quadtree. (Assuming that positive x is right and positive y is down, as is typically the case in Canvas and SVG, ⟨x0, y0⟩ is the topleft corner and ⟨x1, y1⟩ is the lowerright corner; however, the coordinate system is arbitrary, so more formally x0 <= x1 and y0 <= y1.) Returns root.
Nodes
Internal nodes of the quadtree are represented as fourelement arrays in lefttoright, toptobottom order:

0
 the topleft quadrant, if any. 
1
 the topright quadrant, if any. 
2
 the bottomleft quadrant, if any. 
3
 the bottomright quadrant, if any.
A child quadrant may be undefined if it is empty.
Leaf nodes are represented as objects with the following properties:

data
 the data associated with this point, as passed to quadtree.add. 
next
 the next datum in this leaf, if any.
The length
property may be used to distinguish leaf nodes from internal nodes: it is undefined for leaf nodes, and 4 for internal nodes. For example, to iterate over all data in a leaf node:
if (!node.length) do console.log(node.data); while (node = node.next);
The point’s x and ycoordinates must not be modified while the point is in the quadtree. To update a point’s position, remove the point and then readd it to the quadtree at the new position. Alternatively, you may discard the existing quadtree entirely and create a new one from scratch; this may be more efficient if many of the points have moved.