Learn D3.js

Node ordering

Ordering and sorting is very important in data visualizations, which might stack several objects over each other. In HTML, you can use the CSS z-index to place an object above the others, but in SVG, you need to change the document order. The raise() and lower() methods can be used to perform bring-to-front and send-to-back operations.

For example, this code will place all nodes with an even index after the odd-indexed nodes:

d3.select("div").selectAll("p:nth-child(2n)").lower()

And this will place the even ones before the odd ones (see Append/6-raise-lower.html):

d3.select("div").selectAll("p:nth-child(2n)").raise()

Elements are bound to data in array index order. If you bind elements and then sort the array, their positions ...