Alyssa Jaisle Alyssa Jaisle - 1 year ago 77
Javascript Question

How to order items/layers in my D3 force graph?

I want the pop up box when you click on a node to pop up in front of the nodes, not behind. I looked into this questions here but I can't figure out how to apply that my own project.

Here is the JSFiddle

I am guessing the plot needs to append the rect or inbox but I have tried and it's not working.

var plot = svg.append("g")
.attr("id", "plot")
.attr("class","hide")
.attr("transform", "translate(" + pad + ", " + pad + ")");


Many thanks!

Answer Source

if I understand correctly your question you want the upper left box which appears on clicking the nodes stay on TOP of the other elements instead than behind.

SVG displays elements layering them one above another in the same order they're defined.

The solution is simple, you just need to move

var plot = svg.append("g")
        .attr("id", "plot")
        .attr("class","hide")
        .attr("transform", "translate(" + pad + ", " + pad + ")");

AFTER the definition of the other elements (nodes & c).

Here's the edited JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download