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
Two problems that I would like help with:
- 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.
- despite looking at the somewhat scant
select.joindocumentation, 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)); node .append('rect') ....
Current process is to initially call
To subsequently update, call
d3.selectAll('g > *').remove(); in
restartSim is a current workaround I wish to be able to remove.