chart = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(null, context).pointRadius(2.5);
function render(i) {
context.clearRect(0, 0, width, height);
if (i >= 0) {
context.fillStyle = "#0f0";
context.beginPath();
voronoi.renderCell(i, context);
context.fill();
const V = [...voronoi.neighbors(i)];
const D = [...delaunay.neighbors(i)];
const U = D.filter(j => !V.includes(j));
context.fillStyle = "#ff0";
context.beginPath();
for (const j of U) voronoi.renderCell(j, context);
context.fill();
context.fillStyle = "#cfc";
context.beginPath();
for (const j of V) voronoi.renderCell(j, context);
context.fill();
context.beginPath();
for (const j of D) {
context.moveTo(...points[i]);
context.lineTo(...points[j]);
}
context.strokeStyle = "#000";
context.stroke();
}
context.strokeStyle = "#000";
context.beginPath();
voronoi.render(context);
voronoi.renderBounds(context);
context.stroke();
context.fillStyle = "#000";
context.beginPath();
path({type: "MultiPoint", coordinates: points});
context.fill();
}
context.canvas.ontouchmove =
context.canvas.onmousemove = event => {
render(delaunay.find(event.layerX, event.layerY));
};
for (let i = 0, n = points.length; i < n; ++i) {
if ([...voronoi.neighbors(i)].length !== [...delaunay.neighbors(i)].length) {
render(i);
break;
}
}
return context.canvas;
}