chart = {
const context = DOM.context2d(width, height);
const canvas = context.canvas;
const circles = d3.range(20).map(i => ({
x: Math.random() * (width - radius * 2) + radius,
y: Math.random() * (height - radius * 2) + radius,
color: d3.schemeCategory10[i % 10]
}));
function render() {
context.clearRect(0, 0, width, height);
for (const {x, y, color, active} of circles) {
context.beginPath();
context.moveTo(x + radius, y);
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fillStyle = color;
context.fill();
if (active) {
context.lineWidth = 2;
context.stroke();
}
}
}
d3.select(context.canvas).call(drag(circles)
.on("start.render drag.render end.render", render));
render();
return canvas;
}