D3 force graph rendering nodes and links

Question

I am having a problem with my force graph which I have used d3 to create. I am dynamically adding to the nodes and links array with data I retrieve using d3.json. My problem comes after the initial rendering and I add more nodes and links to their respective arrays. The links that are added have been rendered "on-top" of the node. Unfortunately my nodes consist of images so the link is covering part of that image. The solution I have come up with is to select everything (nodes and links) inside my svg container and remove them on each update() call and re-enter each element again. This seems like an inefficient way to go about it. I have tampered with z-index but to no avail. Are there any suggestions?

Answer 1

If you always PREpend any link (i.e. add the links to the container before any of the nodes), there will never be a link overlapping a node. You do that with insert(), which will prepend as long as you specify a selector matching the nodes you want to keep in on top:

forceContainer.selectAll('.node').data(force.nodes())
forceContainer.enter()
  .append('div')
  .attr('class', 'node')

forceContainer.selectAll('.link').data(force.links())
forceContainer.enter()
  .insert('div', '.node') // Inserts link before any of the existing nodes