chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const brush = d3.brush()
.on("brush end", brushed);
svg.append("style").text(`
.point--scanned {
fill: orange;
fill-opacity: 1;
stroke: orange;
stroke-width: 3px;
}
.point--selected {
fill: red;
fill-opacity: 1;
stroke: red;
stroke-width: 5px;
}
`);
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#ccc")
.selectAll("rect")
.data(nodes(quadtree))
.join("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);
const point = svg.append("g")
.attr("fill-opacity", 0.4)
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", 2);
svg.append("g")
.call(brush)
.call(brush.move, [[100, 100], [200, 200]]);
function brushed({selection}) {
point.each(d => d.scanned = d.selected = false);
if (selection) search(quadtree, selection);
point.classed("point--scanned", d => d.scanned);
point.classed("point--selected", d => d.selected);
}
return svg.node();
}