chart = {
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
const context = DOM.context2d(width, height);
const idContext = DOM.context2d(width, height);
const getNodeFromMouseEvent = event => {
const x = Math.floor(event.offsetX * window.devicePixelRatio);
const y = Math.floor(event.offsetY * window.devicePixelRatio);
const color = idContext.getImageData(x, y, 1, 1).data;
const index = colorToIndex(color);
const node = nodes[index];
return node;
};
d3.select(context.canvas).on("mousemove", () => {
const d = getNodeFromMouseEvent(d3.event);
if (d) {
context.canvas.title = d.id;
} else {
context.canvas.title = "";
}
});
d3.select(context.canvas)
.call(
drag(simulation)
.container(context.canvas)
.subject(() => {
const d = getNodeFromMouseEvent(d3.event.sourceEvent);
return d || { x: d3.event.x, y: d3.event.y };
})
);
simulation.on("tick", () => {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
idContext.clearRect(0, 0, idContext.canvas.width, idContext.canvas.height);
links.forEach(d => {
context.beginPath();
context.moveTo(d.source.x, d.source.y);
context.lineTo(d.target.x, d.target.y);
context.globalAlpha = 0.6;
context.strokeStyle = "#999";
context.lineWidth = Math.sqrt(d.value);
context.stroke();
context.globalAlpha = 1;
});
nodes.forEach((d, i) => {
context.beginPath();
context.arc(d.x, d.y, 5, 0, 2*Math.PI);
context.strokeStyle = "#fff";
context.lineWidth = 1.5;
context.stroke();
context.fillStyle = color(d);
context.fill();
idContext.beginPath();
idContext.arc(d.x, d.y, 5, 0, 2*Math.PI);
idContext.fillStyle = indexToColor(i);
idContext.fill();
});
});
invalidation.then(() => simulation.stop());
return context.canvas;
}