D3.js：将SVG元素（路径）带到最前端（与z-index一样）

Question

问题：

我试图在鼠标悬停时将内圈元素置于最前端，然后在mouseout上恢复它们​​。

小提琴：

https://jsfiddle.net/jo8xd3mo/1/

代码：

var dataset = {
  inside: [53245, 28479, 19697, 24037, 40245],
  outside: [40245, 25203, 65232, 53092, 12035]
};

var $container = $('.modular-chart'),
  width = $container.width(),
  height = $container.height(),
  cwidth = 80;

var color = d3.scale.category20c();

var pie = d3.layout.pie()
  .sort(null);

var arc = d3.svg.arc();

var svg = d3.select(".pie-chart").append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
  .attr('preserveAspectRatio', 'xMinYMin')
  .append("g")
  .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")")

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");

var path = gs.selectAll("path")
  .data(function(d) {
    return pie(d);
  })
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d, i, j) {
    return arc.innerRadius(cwidth + 280).outerRadius(cwidth * (j + 2.5))(d);
  })
  .on("mouseover", function(d, i, j) {
      d3.select(this)
        .transition()
        .duration(500)
        .style("fill", "white")
        .attr("d", d3.svg.arc().innerRadius(cwidth + 300).outerRadius(cwidth * (j + 2.5)))
  })
  .on("mouseout", function(d, i, j) {
    d3.select(this)
      .transition()
      .duration(500)
      .style("fill", color(i))
      .attr("d", d3.svg.arc().innerRadius(cwidth + 280).outerRadius(cwidth * (j + 2.5)))
  });

分析：

据我所知，SVG元素不存在z-index，项目根据DOM中的顺序进行分层。我找到的various solutions似乎不适用于我的用例。如果有人有任何建议或见解，我会全力以赴。几个小时我一直在努力，可以用另一双眼睛。谢谢！