d3: Request code review/update pattern help

New D3 user.

Managed to cobble together a working library function for adding a force directed graph to a SVG element embedded in a Vue3/Vuetify component.

Relevant code is in

The primary block is libD3Force.js

Two problems that I would like help with:

  1. it looks like spaghetti! Maybe that is what it should/typically looks like. Confirmation or any suggestions of how to improve the code structure would be appreciated.
  2. despite looking at the somewhat scant select.join documentation, I am unable to see how to apply it to my node select/pan/drag code (libD3Force.js:166):
    // Create a group draggable surface for nodes and links
    const node = g.selectAll('g').data(nodes).enter().append('g').attr('cursor', 'move');

    // Add node drag behavior.
    node.call(d3.drag().on('start', startDrag).on('drag', doDrag).on('end', stopDrag));


Current process is to initially call updateSim then startSim.
To subsequently update, call updateSim then restartSim.
That d3.selectAll('g > *').remove(); in restartSim is a current workaround I wish to be able to remove.