Estoy tratando de agregar un evento de arrastre a mi diseño de fuerza d3, pero por alguna razón, el attr del evento no está definido, por lo que no sucede nada. Sé que hubo cambios en el nuevo documento de d3-drag y seguí estas instrucciones.

aquí está mi código:

 const node = svg .selectAll("circle") .data(nodes) .enter() .append("circle") .attr("r", 35) // radius field, so width and height 80X80 .attr("stroke", "lightgray") .attr("stroke-width", 0.5) .style("fill", "lightgray") .call(handler .on('start', dragstarted) .on('drag', dragged) .on('end', dragended)

el evento funciona:

 const dragstarted = (event: any, d: any) => { console.log(' dragged d', d); console.log('event', event); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore if (!event.active) { simulation.alphaTarget(0.3).restart(); } d.fx = dx; d.fy = dy; } // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore const dragged = (event: any, d: any) => { console.log(' dragged d', d); console.log('event', event); d.fx = event.x; d.fy = event.y; } // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore const dragended = (event: any, d: any) => { console.log(' dragended d', d); console.log('event', event); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore if (event.active) { simulation.alphaTarget(0); } d.fx = null; d.fy = null; }

el ejemplo de los documentos:

 d3.drag() .on("start", (event, d) => circle.filter(p => p === d).raise().attr("stroke", "black")) .on("drag", (event, d) => (dx = event.x, dy = event.y)) .on("end", (event, d) => circle.filter(p => p === d).attr("stroke", null))

y esto es lo que obtengo:

 Uncaught TypeError: Cannot read properties of undefined (reading 'document') at nodrag.js:5

Agregué capturas de pantalla del lugar donde no se pudo obtener el evento.

No entiendo lo que hago mal aquí, gracias por la ayuda.

EDITAR el ejemplo completo con el código: https://stackblitz.com/edit/react-saqrv9?file=src%2Fgraph.tsx