0

I am writing an animation using d3, and I cannot seem to find a way to easily ensure that a graphic always appears "behind" other graphics.

Specifically, I am dealing with lines and circles (imagine a directed graph), and it sort of looks bad to have some of the lines on top of the circles, and others underneath. Is there a way to set the z/depth of certain graphics, in this case my lines, manually? I apologize if this seems google-able, but I attempted typing "graphic depth d3" and other variations and got nothing.

EDIT : Accepted answer works, a more detailed description of the problem can be found here.

Community
  • 1
  • 1
Zack
  • 13,454
  • 24
  • 75
  • 113
  • 1
    Maybe the following SO question helps: http://stackoverflow.com/questions/13595175/updating-svg-element-z-index-with-d3 – tiguchi Apr 21 '15 at 19:02

1 Answers1

2

SVG doesn't have a z-index property or similar, the elements are drawn in the order in which they appear in the DOM -- elements higher up are drawn behind elements that have been added afterwards.

The easiest way to group elements into layers is to use g elements. So in your example, I would use two g groups, one for the lines and one for the circles. Add the g for the lines first and then all of the lines underneath it. If you then add the circles to the second g that you added afterwards, all circles will always be on top of all lines.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • Alright, that seems to be the way to do things. Lemme get a mockup really quick and then I'll give you the accepted answer. – Zack Apr 21 '15 at 19:11
  • Worked as expected. Thanks for the knowledge re-direct. – Zack Apr 21 '15 at 19:28