function chart() {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("cursor", "crosshair"),
quad = svg
.selectAll(".node")
.data(materialize(quadtree))
.enter()
.append("rect")
.attr("class", "node")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("width", d => d.y1 - d.y0)
.attr("height", d => d.x1 - d.x0),
circle = svg
.selectAll(".radius")
.data([radius])
.join("circle")
.attr("r", d => d)
.attr("class", "radius")
.attr("stroke", "orange"),
point = svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", 2);
svg.on("mousemove click", move);
move();
return svg.node();
function move(event) {
const [x, y] = this ? d3.pointer(event, this) : [200, 200];
quad.each(q => (q.node.visited = false));
point.each(d => (d.visited = false));
const one = quadtree.find(x, y, radius),
all = findInCircleMark(quadtree, x, y, radius);
quad.classed("visited", d => d.node.visited);
point
.classed("visited", d => d.visited)
.classed("all", d => all.includes(d))
.classed("find", d => d === one);
circle.attr("cx", x).attr("cy", y);
}
}