Updating SVG Element Z-Index With D3

by

As explained in the other answers, SVG does not have a notion of a z-index. Instead, the order of elements in the document determines the order in the drawing.

Apart from reordering the elements manually, there is another way for certain situations:

Working with D3 you often have certain types of elements that should always be drawn on top of other types of elements.

For example, when laying out graphs, links should always be placed below nodes. More generally, some background elements usually need to be placed below everything else, while some highlights and overlays should be placed above.

If you have this kind of situation, I found that creating parent group elements for those groups of elements is the best way to go. In SVG, you can use the g element for that. For example, if you have links that should be always placed below nodes, do the following:

svg.append("g").attr("id", "links")
svg.append("g").attr("id", "nodes")

Now, when you paint your links and nodes, select as follows (the selectors starting with # reference the element id):

svg.select("#links").selectAll(".link")
// add data, attach elements and so on

svg.select("#nodes").selectAll(".node")
// add data, attach elements and so on

Now, all links will always be appended structurally before all node elements. Thus, the SVG will show all links below all nodes, no matter how often and in what order you add or remove elements. Of course, all elements of the same type (i.e. within the same container) will still be subject to the order in which they were added.

More Related Contents:

  1. Scaling d3 v4 map to fit SVG (or at all)
  2. How to add a tooltip to an svg graphic?
  3. Replacing d3.transform in D3 v4
  4. How do I include newlines in labels in D3 charts?
  5. How can d3.transform be used in d3 v4?
  6. D3 Appending Text to a SVG Rectangle
  7. d3 add text to circle
  8. In d3, how to get the interpolated line data from a SVG line?
  9. Creating and appending detached elements with d3.create
  10. Label outside arc (Pie chart) d3.js
  11. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  12. Where is d3.svg.diagonal()?
  13. How to draw a path smoothly from start point to end point in D3.js
  14. (Embed and) Refer to an external SVG via D3 and/or javascript
  15. Plotting points on a map with D3
  16. D3 fill shape with image using pattern
  17. D3 – how to deal with JSON data structures?
  18. Setting rounded corners for svg:image
  19. Circles in Map Displayed Incorrect Location in D3 V4
  20. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  21. svg / d3.js rounded corners on one side of a rectangle
  22. SVG to Canvas with d3.js
  23. Add names of the states to a map in d3.js
  24. Add text label to d3 node in Force directed Graph and resize on hover
  25. How do I return y coordinate of a path in d3.js?
  26. Display an arrow head in the middle of D3 force layout link
  27. Calculate SVG Path Centroid with D3.js
  28. Can’t make paths draw growing slowly with D3
  29. draw text in d3 arc javascript
  30. D3 put arc labels in a Pie Chart if there is enough space

Leave a Comment