Custom nodes get stacked on top of each other

[MattisM02]

Running this code makes the nodes get stacked on top of each other.

    const nodeSize = 75;

    graphics.node((node) => {
      const ui = Viva.Graph.svg('g');

      const circle = Viva.Graph.svg('circle')
        .attr('r', nodeSize) // Set the radius of the circle
        .attr('fill', 'white') // Set the fill color of the circle
        .attr('stroke', 'white') // Set the stroke color of the circle
        .attr('stroke-width', 2);

      const text = Viva.Graph.svg('text')
        .attr('text-anchor', 'middle')
        .attr('font-size', 18)
        .attr('fill', 'black') // Set the text color
        .text(node.data.label);

      ui.append(circle);
      ui.append(text);
      console.log(ui);

      // pin first and last node
      if (
        node.data.label === sortedTaskList[0].name ||
        node.data.label === sortedTaskList[sortedTaskList.length - 1].name
      ) {
        layout.pinNode(node, !layout.isNodePinned(node));
      }

      return ui;
    });

It now looks like this:

The log of the ui returns this:

How do I get them to correspond to the graph?

[MattisM02]

  graphics
      .node((node) => {
        const ui = Viva.Graph.svg('g');
        const text = Viva.Graph.svg('text')
          .attr('text-anchor', 'middle')
          .attr('font-size', 18)
          .attr('fill', 'black')
          .text(node.id);

        const circle = Viva.Graph.svg('circle')
          .attr('r', nodeSize)
          .attr('fill', 'white')
          .attr('stroke', 'white')
          .attr('stroke-width', 2);

        // text.append(circle);

        // pin first and last node
        if (
          node.data.label === sortedTaskList[0].name ||
          node.data.label === sortedTaskList[sortedTaskList.length - 1].name
        ) {
          layout.pinNode(node, !layout.isNodePinned(node));
        }

        ui.append(circle);
        ui.append(text);
        console.log(ui);
        return ui;
      })
      .placeNode((nodeUI, pos) => {
        nodeUI.attr('transform', `translate(${pos.x - nodeSize / 2},${pos.y - nodeSize / 2})`);
      });`

Thats the fix