mirror of
https://github.com/d3/d3.git
synced 2025-12-08 19:46:24 +00:00
* checkpoint vitepress docs * edits * edits * hero drop shadow * d3-array edits * resolve d3 * split d3-array * move d3-array stuff around * d3-array is collapsed: true * italicize parameter names * searching edits * update dependencies * d3-array edits * array edits * array edits * array edits * array edits * array edits * move files * array edits * array edits * array edits * getting started edits * modules page * array edits * more structure * live example * dsv edits * fetch edits * dsv edits * random edits * time format edits * time edits * time edits * modules edits * color edits * color edits * interpolate edits * scale-chromatic edits * selection edits * break up d3-interpolate * scale edits * time scale edits * scale edits * scale edits * band edits * band edits * more descriptive titles * band and point edits * sequential edits * diverging edits * quantize edits * quantile edits * threshold edits * doc edits * fix titles * sequential edits * axis edits * axis edits * axis edits * shape edits * shape edits * dark mode chart * dark mode chart * curve edits * interpolate edits * line edits * link edits * radial edits * pie edits * symbol edits * stack edits * stack examples * path edits * polygon edits * quadtree edits * random examples * ease edits * ease edits * ease edits * timer edits * delaunay edits * quadtree find example * voronoi edits * dispatch edits * contour edits * chord edits * chord edits * fix find highlight * quadtree animation * transition edits * transition edits * transition edits * zoom edits * drag edits * brush edits * force edits * voronoi neighbors example * hierarchy edits * api edits * community edits * getting started edits * geo edits * Add short "D3 in React" section (#3659) * Add short "D3 in React" section I know you removed the TODO but I was already trying to fill it in! I think just making the distinction of modules that touch the DOM and those that don't was super clarifying for me personally when I figured that out. And I always forget the most basic ref pattern (and still might've messed it up here). I don't think we should get into updating or interactivity or whatever, but I think just this much goes a long way toward demystifying (and showing just the most basic best practices). * forgot i made data generic, rm reference to normal distribution * useEffect cleans up after itself Co-authored-by: Mike Bostock <mbostock@gmail.com> * Update getting-started.md --------- Co-authored-by: Mike Bostock <mbostock@gmail.com> * build fixes * index edits --------- Co-authored-by: Toph Tucker <tophtucker@gmail.com>
85 lines
2.1 KiB
JavaScript
85 lines
2.1 KiB
JavaScript
// An instrumented version of quadtree.find that shows the visited nodes.
|
||
export default function quadtree_findVisited(x, y, radius) {
|
||
var visited = [],
|
||
x0 = this._x0,
|
||
y0 = this._y0,
|
||
x1,
|
||
y1,
|
||
x2,
|
||
y2,
|
||
x3 = this._x1,
|
||
y3 = this._y1,
|
||
quads = [],
|
||
node = this._root,
|
||
q,
|
||
i;
|
||
|
||
if (node) quads.push(new Quad(node, x0, y0, x3, y3, 1, 1, -1, -1));
|
||
if (radius == null) radius = Infinity;
|
||
else {
|
||
x0 = x - radius, y0 = y - radius;
|
||
x3 = x + radius, y3 = y + radius;
|
||
radius *= radius;
|
||
}
|
||
|
||
while ((q = quads.pop())) {
|
||
|
||
// Stop searching if this quadrant can’t contain a closer node.
|
||
if (!(node = q.node)
|
||
|| (x1 = q.x0) > x3
|
||
|| (y1 = q.y0) > y3
|
||
|| (x2 = q.x1) < x0
|
||
|| (y2 = q.y1) < y0) continue;
|
||
|
||
visited.push(q);
|
||
|
||
// Bisect the current quadrant.
|
||
if (node.length) {
|
||
var xm = (x1 + x2) / 2,
|
||
ym = (y1 + y2) / 2;
|
||
|
||
// 0 1
|
||
// 2 3
|
||
quads.push(
|
||
new Quad(node[3], xm, ym, x2, y2, 1, 1, q.dx1 - 1, q.dy1 - 1),
|
||
new Quad(node[2], x1, ym, xm, y2, q.dx0 + 1, 1, -1, q.dy1 - 1),
|
||
new Quad(node[1], xm, y1, x2, ym, 1, q.dy0 + 1, q.dx1 - 1, -1),
|
||
new Quad(node[0], x1, y1, xm, ym, q.dx0 + 1, q.dy0 + 1, -1, -1)
|
||
);
|
||
|
||
// Visit the closest quadrant first.
|
||
if ((i = (y >= ym) << 1 | (x >= xm))) {
|
||
q = quads[quads.length - 1];
|
||
quads[quads.length - 1] = quads[quads.length - 1 - i];
|
||
quads[quads.length - 1 - i] = q;
|
||
}
|
||
}
|
||
|
||
// Visit this point. (Visiting coincident points isn’t necessary!)
|
||
else {
|
||
var dx = x - +this._x.call(null, node.data),
|
||
dy = y - +this._y.call(null, node.data),
|
||
d2 = dx * dx + dy * dy;
|
||
if (d2 < radius) {
|
||
var d = Math.sqrt(radius = d2);
|
||
x0 = x - d, y0 = y - d;
|
||
x3 = x + d, y3 = y + d;
|
||
}
|
||
}
|
||
}
|
||
|
||
return visited;
|
||
}
|
||
|
||
function Quad(node, x0, y0, x1, y1, dx0, dy0, dx1, dy1) {
|
||
this.node = node;
|
||
this.x0 = x0;
|
||
this.y0 = y0;
|
||
this.x1 = x1;
|
||
this.y1 = y1;
|
||
this.dx0 = dx0;
|
||
this.dy0 = dy0;
|
||
this.dx1 = dx1;
|
||
this.dy1 = dy1;
|
||
}
|