chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const vo = svg.append("path");
const gx = svg.append("g");
const gy = svg.append("g");
const dots = svg.append("g")
.selectAll("ellipse")
.data(data)
.join("ellipse")
.attr("fill", () => d3.schemeOranges[9][(Math.random() * 9) | 0]);
let z = d3.zoomIdentity;
const zoomX = d3.zoom().scaleExtent([0.1, 10]);
const zoomY = d3.zoom().scaleExtent([0.2, 5]);
const tx = () => d3.zoomTransform(gx.node());
const ty = () => d3.zoomTransform(gy.node());
gx.call(zoomX).attr("pointer-events", "none");
gy.call(zoomY).attr("pointer-events", "none");
const zoom = d3.zoom().on("zoom", function(e) {
const t = e.transform;
const k = t.k / z.k;
const point = center(e, this);
const doX = point[0] > x.range()[0];
const doY = point[1] < y.range()[0];
const shift = e.sourceEvent && e.sourceEvent.shiftKey;
if (k === 1) {
doX && gx.call(zoomX.translateBy, (t.x - z.x) / tx().k, 0);
doY && gy.call(zoomY.translateBy, 0, (t.y - z.y) / ty().k);
} else {
doX && gx.call(zoomX.scaleBy, shift ? 1 / k : k, point);
doY && gy.call(zoomY.scaleBy, k, point);
}
z = t;
redraw();
});
return svg
.call(zoom)
.call(zoom.transform, d3.zoomIdentity.scale(0.8))
.node();
function redraw() {
const xr = tx().rescaleX(x);
const yr = ty().rescaleY(y);
gx.call(xAxis, xr);
gy.call(yAxis, yr);
dots
.attr("cx", d => xr(d[0]))
.attr("cy", d => yr(d[1]))
.attr("rx", 6 * Math.sqrt(tx().k))
.attr("ry", 6 * Math.sqrt(ty().k));
vo.attr(
"d",
d3.Delaunay.from(data.map(d => [xr(d[0]), yr(d[1])]))
.voronoi([35, 0, width, height - 25])
.render()
)
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("stroke-width", 0.5);
}
function center(event, target) {
if (event.sourceEvent) {
const p = d3.pointers(event, target);
return [d3.mean(p, d => d[0]), d3.mean(p, d => d[1])];
}
return [width / 2, height / 2];
}
}