First of all I know there have been similar questions here, but I still seem to need a bit of help understanding why what I have done so far is not working.

I am working on this code, and I want to add some text on each node. The lines of code I have messed around with are the following.

I changed this

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));

to

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);

and added the following line of code to this section

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 => d.x)
        .attr('cy', d => d.y);

      // Added this line
      node.attr('transform', d => `translate(${d.x},${d.y})`);
    }

but it's breaking things up. Now the text is rendered but the circles are not.

What am I doing wrong? Any help would be appreciated!