source: node_modules/d3-quadtree/README.md@ e4c61dd

Last change on this file since e4c61dd was e4c61dd, checked in by istevanoska <ilinastevanoska@…>, 6 months ago

Prototype 1.1

  • Property mode set to 100644
File size: 12.2 KB
Line 
1# d3-quadtree
2
3A [quadtree](https://en.wikipedia.org/wiki/Quadtree) recursively partitions two-dimensional space into squares, dividing each square into four equally-sized squares. Each distinct point exists in a unique leaf [node](#nodes); coincident points are represented by a linked list. Quadtrees can accelerate various spatial operations, such as the [Barnes–Hut approximation](https://en.wikipedia.org/wiki/Barnes–Hut_simulation) for computing many-body forces, collision detection, and searching for nearby points.
4
5<a href="http://bl.ocks.org/mbostock/9078690"><img src="http://bl.ocks.org/mbostock/raw/9078690/thumbnail.png" width="202"></a>
6<a href="http://bl.ocks.org/mbostock/4343214"><img src="http://bl.ocks.org/mbostock/raw/4343214/thumbnail.png" width="202"></a>
7
8## Installing
9
10If you use npm, `npm install d3-quadtree`. You can also download the [latest release on GitHub](https://github.com/d3/d3-quadtree/releases/latest). For vanilla HTML in modern browsers, import d3-quadtree from Skypack:
11
12```html
13<script type="module">
14
15import {quadtree} from "https://cdn.skypack.dev/d3-quadtree@3";
16
17const tree = quadtree();
18
19</script>
20```
21
22For legacy environments, you can load d3-quadtree’s UMD bundle from an npm-based CDN such as jsDelivr; a `d3` global is exported:
23
24```html
25<script src="https://cdn.jsdelivr.net/npm/d3-quadtree@3"></script>
26<script>
27
28const tree = d3.quadtree();
29
30</script>
31```
32
33## API Reference
34
35<a name="quadtree" href="#quadtree">#</a> d3.<b>quadtree</b>([<i>data</i>[, <i>x</i>, <i>y</i>]]) [<>](https://github.com/d3/d3-quadtree/blob/master/src/quadtree.js "Source")
36
37Creates a new, empty quadtree with an empty [extent](#quadtree_extent) and the default [*x*-](#quadtree_x) and [*y*-](#quadtree_y)accessors. If *data* is specified, [adds](#quadtree_addAll) the specified array of data to the quadtree. This is equivalent to:
38
39```js
40const tree = d3.quadtree()
41 .addAll(data);
42```
43
44If *x* and *y* are also specified, sets the [*x*-](#quadtree_x) and [*y*-](#quadtree_y) accessors to the specified functions before adding the specified array of data to the quadtree, equivalent to:
45
46```js
47const tree = d3.quadtree()
48 .x(x)
49 .y(y)
50 .addAll(data);
51```
52
53<a name="quadtree_x" href="#quadtree_x">#</a> <i>quadtree</i>.<b>x</b>([<i>x</i>]) [<>](https://github.com/d3/d3-quadtree/blob/master/src/x.js "Source")
54
55If *x* is specified, sets the current *x*-coordinate accessor and returns the quadtree. If *x* is not specified, returns the current *x*-accessor, which defaults to:
56
57```js
58function x(d) {
59 return d[0];
60}
61```
62
63The *x*-acccessor is used to derive the *x*-coordinate of data when [adding](#quadtree_add) to and [removing](#quadtree_remove) from the tree. It is also used when [finding](#quadtree_find) to re-access the coordinates of data previously added to the tree; therefore, the *x*- and *y*-accessors must be consistent, returning the same value given the same input.
64
65<a name="quadtree_y" href="#quadtree_y">#</a> <i>quadtree</i>.<b>y</b>([<i>y</i>]) [<>](https://github.com/d3/d3-quadtree/blob/master/src/y.js "Source")
66
67If *y* is specified, sets the current *y*-coordinate accessor and returns the quadtree. If *y* is not specified, returns the current *y*-accessor, which defaults to:
68
69```js
70function y(d) {
71 return d[1];
72}
73```
74
75The *y*-acccessor is used to derive the *y*-coordinate of data when [adding](#quadtree_add) to and [removing](#quadtree_remove) from the tree. It is also used when [finding](#quadtree_find) to re-access the coordinates of data previously added to the tree; therefore, the *x*- and *y*-accessors must be consistent, returning the same value given the same input.
76
77<a name="quadtree_extent" href="#quadtree_extent">#</a> <i>quadtree</i>.<b>extent</b>([*extent*]) [<>](https://github.com/d3/d3-quadtree/blob/master/src/extent.js "Source")
78
79If *extent* is specified, expands the quadtree to [cover](#quadtree_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](#quadtree_cover) or [*quadtree*.add](#quadtree_add).
80
81<a name="quadtree_cover" href="#quadtree_cover">#</a> <i>quadtree</i>.<b>cover</b>(<i>x</i>, <i>y</i>) [<>](https://github.com/d3/d3-quadtree/blob/master/src/cover.js "Source")
82
83Expands 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](#quadtree_root) [node](#nodes) 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.)
84
85<a name="quadtree_add" href="#quadtree_add">#</a> <i>quadtree</i>.<b>add</b>(<i>datum</i>) [<>](https://github.com/d3/d3-quadtree/blob/master/src/add.js "Source")
86
87Adds the specified *datum* to the quadtree, deriving its coordinates ⟨*x*,*y*⟩ using the current [*x*-](#quadtree_x) and [*y*-](#quadtree_y)accessors, and returns the quadtree. If the new point is outside the current [extent](#quadtree_extent) of the quadtree, the quadtree is automatically expanded to [cover](#quadtree_cover) the new point.
88
89<a name="quadtree_addAll" href="#quadtree_addAll">#</a> <i>quadtree</i>.<b>addAll</b>(<i>data</i>) [<>](https://github.com/d3/d3-quadtree/blob/master/src/add.js "Source")
90
91Adds the specified array of *data* to the quadtree, deriving each element’s coordinates ⟨*x*,*y*⟩ using the current [*x*-](#quadtree_x) and [*y*-](#quadtree_y)accessors, and return this quadtree. This is approximately equivalent to calling [*quadtree*.add](#quadtree_add) repeatedly:
92
93```js
94for (let i = 0, n = data.length; i < n; ++i) {
95 quadtree.add(data[i]);
96}
97```
98
99However, this method results in a more compact quadtree because the extent of the *data* is computed first before adding the data.
100
101<a name="quadtree_remove" href="#quadtree_remove">#</a> <i>quadtree</i>.<b>remove</b>(<i>datum</i>) [<>](https://github.com/d3/d3-quadtree/blob/master/src/remove.js "Source")
102
103Removes the specified *datum* from the quadtree, deriving its coordinates ⟨*x*,*y*⟩ using the current [*x*-](#quadtree_x) and [*y*-](#quadtree_y)accessors, and returns the quadtree. If the specified *datum* does not exist in this quadtree, this method does nothing.
104
105<a name="quadtree_removeAll" href="#quadtree_removeAll">#</a> <i>quadtree</i>.<b>removeAll</b>(<i>data</i>) [<>](https://github.com/d3/d3-quadtree/blob/master/src/remove.js "Source")
106
107Removes the specified *data* from the quadtree, deriving their coordinates ⟨*x*,*y*⟩ using the current [*x*-](#quadtree_x) and [*y*-](#quadtree_y)accessors, and returns the quadtree. If a specified datum does not exist in this quadtree, it is ignored.
108
109<a name="quadtree_copy" href="#quadtree_copy">#</a> <i>quadtree</i>.<b>copy</b>()
110
111Returns a copy of the quadtree. All [nodes](#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.
112
113<a name="quadtree_root" href="#quadtree_root">#</a> <i>quadtree</i>.<b>root</b>() [<>](https://github.com/d3/d3-quadtree/blob/master/src/root.js "Source")
114
115Returns the root [node](#nodes) of the quadtree.
116
117<a name="quadtree_data" href="#quadtree_data">#</a> <i>quadtree</i>.<b>data</b>() [<>](https://github.com/d3/d3-quadtree/blob/master/src/data.js "Source")
118
119Returns an array of all data in the quadtree.
120
121<a name="quadtree_size" href="#quadtree_size">#</a> <i>quadtree</i>.<b>size</b>() [<>](https://github.com/d3/d3-quadtree/blob/master/src/size.js "Source")
122
123Returns the total number of data in the quadtree.
124
125<a name="quadtree_find" href="#quadtree_find">#</a> <i>quadtree</i>.<b>find</b>(<i>x</i>, <i>y</i>[, <i>radius</i>]) [<>](https://github.com/d3/d3-quadtree/blob/master/src/find.js "Source")
126
127Returns 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.
128
129<a name="quadtree_visit" href="#quadtree_visit">#</a> <i>quadtree</i>.<b>visit</b>(<i>callback</i>) [<>](https://github.com/d3/d3-quadtree/blob/master/src/visit.js "Source")
130
131Visits each [node](#nodes) in the quadtree in pre-order 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 top-left corner and ⟨*x1*, *y1*⟩ is the lower-right corner; however, the coordinate system is arbitrary, so more formally *x0* <= *x1* and *y0* <= *y1*.)
132
133If 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](https://en.wikipedia.org/wiki/Barnes–Hut_simulation). Note, however, that child quadrants are always visited in sibling order: top-left, top-right, bottom-left, bottom-right. In cases such as [search](#quadtree_find), visiting siblings in a specific order may be faster.
134
135As 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:
136
137```js
138function search(quadtree, xmin, ymin, xmax, ymax) {
139 const results = [];
140 quadtree.visit((node, x1, y1, x2, y2) => {
141 if (!node.length) {
142 do {
143 let d = node.data;
144 if (d[0] >= xmin && d[0] < xmax && d[1] >= ymin && d[1] < ymax) {
145 results.push(d);
146 }
147 } while (node = node.next);
148 }
149 return x1 >= xmax || y1 >= ymax || x2 < xmin || y2 < ymin;
150 });
151 return results;
152}
153```
154
155<a name="quadtree_visitAfter" href="#quadtree_visitAfter">#</a> <i>quadtree</i>.<b>visitAfter</b>(<i>callback</i>) [<>](https://github.com/d3/d3-quadtree/blob/master/src/visitAfter.js "Source")
156
157Visits each [node](#nodes) in the quadtree in post-order 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 top-left corner and ⟨*x1*, *y1*⟩ is the lower-right corner; however, the coordinate system is arbitrary, so more formally *x0* <= *x1* and *y0* <= *y1*.) Returns *root*.
158
159### Nodes
160
161Internal nodes of the quadtree are represented as four-element arrays in left-to-right, top-to-bottom order:
162
163* `0` - the top-left quadrant, if any.
164* `1` - the top-right quadrant, if any.
165* `2` - the bottom-left quadrant, if any.
166* `3` - the bottom-right quadrant, if any.
167
168A child quadrant may be undefined if it is empty.
169
170Leaf nodes are represented as objects with the following properties:
171
172* `data` - the data associated with this point, as passed to [*quadtree*.add](#quadtree_add).
173* `next` - the next datum in this leaf, if any.
174
175The `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:
176
177```js
178if (!node.length) do console.log(node.data); while (node = node.next);
179```
180
181The point’s *x*- and *y*-coordinates **must not be modified** while the point is in the quadtree. To update a point’s position, [remove](#quadtree_remove) the point and then re-[add](#quadtree_add) 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.
Note: See TracBrowser for help on using the repository browser.