En primer lugar, sé que ha habido preguntas similares aquí, pero todavía parece que necesito un poco de ayuda para entender por qué lo que he hecho hasta ahora no funciona.

Estoy trabajando en este código y quiero agregar algo de texto en cada nodo. Las líneas de código con las que me he metido son las siguientes.

cambié esto

 const node = svg.append('g') .attr('fill', nodeFill) .attr('stroke', nodeStroke) .attr('stroke-opacity', nodeStrokeOpacity) .attr('stroke-width', nodeStrokeWidth) .selectAll('circle') .data(nodes) .join('circle') .attr('r', nodeRadius) .call(drag(simulation));

a

 const node = svg.append('g') .attr('fill', nodeFill) .attr('stroke', nodeStroke) .attr('stroke-opacity', nodeStrokeOpacity) .attr('stroke-width', nodeStrokeWidth) .selectAll('g') .data(nodes) .join('g') .call(drag(simulation)); node.append('circle') .attr('r', nodeRadius); node .append('text') .text('example text') .attr('fill', 'none') .attr('stroke', 'white') .attr('stroke-width', 3);

y agregó la siguiente línea de código a esta sección

 function ticked(): any { link .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); node .attr('cx', d => dx) .attr('cy', d => dy); // Added this line node.attr('transform', d => `translate(${dx},${dy})`); }

pero está rompiendo las cosas. Ahora se representa el texto pero no los círculos.

¿Qué estoy haciendo mal? ¡Cualquier ayuda sería apreciada!