score:2

There is no z-index in a SVG. In an SVG, the order of the elements defines the order of the "painting", and the order of the painting defines who goes on top. The specs are clear:

Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.

Therefore, you'll have to reposition the elements. There is a very simple solution, just do:

selection.raise();

Raise re-inserts each selected element, in order, as the last child of its parent.

Here is a demo, hover over the circle to bring it to the top:

d3.selectAll("circle").on("mouseover", function(){
	d3.select(this).raise()
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height=200>
	<circle cy="100" cx="80" r="60" fill="blue"></circle>
	<circle cy="100" cx="160" r="60" fill="yellow"></circle>
	<circle cy="100" cx="240" r="60" fill="red"></circle>
	<circle cy="100" cx="320" r="60" fill="green"></circle>
</svg>

Note that raise() will only work for elements in the same level (that is, having the same parent element).


Related Query

More Query from same tag