Edges are drawn overlapping Nodes

What should I do in afterRenderEdge to make the edges not overlap the nodes, if possible?

[ajbogh]

I’ll reopen this as a feature request.

The background to why this is difficult is that edges are added to the DOM after the nodes are. Even though everything is running asynchronously, you may still notice that edges are always below nodes. The reason we render edges last is because in prior builds you would see an edge render without the attached nodes, and because edges tended to have a faster rendering cycle than the nodes, you might see a bunch of edges rendered without any nodes. This was undesirable, so I changed the code to render edges after nodes.

What could be done is when edges are rendered, the code could find the first node element and insert the new edges before that node, giving it a lower natural z-index. There might be other CSS methods available, but I believe that using the DOM order is the best approach.

We could also try using a node container and an edge container to group all of the edges above the nodes in the DOM. The problem with this is that it’s a breaking change and could cause more problems than the previous method described above.

Edges that are being moved will always render on top of everything since they are copied to a container at the end of the DOM.

[tamiof]

I came across this issue, and also in real need for this feature to play around with the z-index of the edges not to go on top of the nodes. Hope you guys consider this for the next build. Really like this project, kudos to you.