Estoy tratando de hacer un gráfico dirigido por fuerza usando d3 y estoy en la última versión v7.

 const width = 800; const height = 800; var layoutCanvas = d3 .select("#graphDiv") .append("canvas") .attr("width", width + "px") .attr("height", height + "px") .node(); // this.setState({ canvasAdded: true }); let context = layoutCanvas!.getContext("2d")!; if (!context) { console.log("no 2d context found"); return; } var transform = d3.zoomIdentity; d3.json("test1.json").then((data: any) => { console.log(data); const simulation = d3 .forceSimulation(data.nodes) .force("charge", null) .force("center", d3.forceCenter()) .force("link", d3.forceLink(data.edges)); initGraph(data); function initGraph(data) { simulation.on("tick", simulationUpdate); function simulationUpdate() { context.save(); context.clearRect(0, 0, width, height); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); data.edges.forEach(function (d) { context.beginPath(); context.moveTo(d.source.x, d.source.y); context.lineTo(d.target.x, d.target.y); context.stroke(); }); // Draw the nodes data.nodes.forEach(function (d, i) { context.beginPath(); context.arc(dx, dy, 2, 0, 2 * Math.PI, true); context.fillStyle = d.col ? "red" : "black"; context.fill(); }); context.restore(); } } });

este es mi código y el archivo test1.json es este: fuente

Cuando registro los datos que se leen de la función d3.json()

Mi principal problema es que el lienzo es de 800x800, pero cuando registro el nodo y la posición del borde, se muestra por encima de 800.

Si alguien puede ayudar, sería apreciado.

Ps: la posición X e Y en json está entre 0 y 1.