Reorder elements of SVG ( z-index ) in D3.js

Question

I realise this question has been asked before but I can\'t get to the bottom of it.

Here is my chart... http://www.gogeye.com/financialnews/piechart/index3.html

Answer 1

I am using the D3.js, and found that it has a built-in function for changing the z-order of SVG elements programmatically after the original drawing.

RipTutorial: svg--the-drawing-order covers the d3 builtin function

Quotes from this link:

selection.raise(): Re-inserts each selected element, in order, as the last child of its parent. selection.lower(): Re-inserts each selected element, in order, as the first child of its parent.

d3.selectAll("circle").on("mouseenter", function(){
    d3.select(this).raise(); 
});

d3.selectAll("circle").on("mouseleave", function(){
    d3.select(this).lower(); 
});

see live example their jsFiddle