D3 Js Links Below Nodes

I've created graph object the creates graphs with can later on be extended with more nodes and links. First creation looks good: Then, with add function I've added node 4 and link

Solution 1:

As svg elements are layered in the order they are drawn, the last drawn element will be the topmost element. As you add links after the original drawing of the force, links will overlap nodes. Two solutions come to mind:

1. Use .lower()

When appending a link, use selection.lower() to move it to the bottom (this moves the selected elements in the DOM so that they are under other elements):

svg.append("line")
  .attr(...)
  .lower();

2. Use multiple g elements

Use one g for the links, append this one to the SVG first. Use a second g for the nodes. Now rather than appending links and nodes to the same selection (the svg selection), just append them to their respective g selection. The order in which the g elements are appended now dictates the layering of your nodes and links irrespective of the order they were added to the visualization.