Как эффективно вывести элемент SVG на вершину z-порядка, используя библиотеку D3?

Мой конкретный сценарий представляет собой круговую диаграмму, которая выделяет (добавивstroke кpath) когда мышь находится над данной частью. Блок кода для генерации моего графика ниже: I '

svg.selectAll("path")
    .data(d)
  .enter().append("path")
    .attr("d", arc)
    .attr("class", "arc")
    .attr("fill", function(d) { return color(d.name); })
    .attr("stroke", "#fff")
    .attr("stroke-width", 0)
    .on("mouseover", function(d) {
        d3.select(this)
            .attr("stroke-width", 2)
            .classed("top", true);
            //.style("z-index", 1);
    })
    .on("mouseout", function(d) {
        d3.select(this)
            .attr("stroke-width", 0)
            .classed("top", false);
            //.style("z-index", -1);
    });

Я попробовал несколько вариантов, но пока не повезло. С помощьюstyle("z-index") и звонитclassed оба не работали.

"Топ" класс определяется следующим образом в моем CSS:

.top {
    fill: red;
    z-index: 100;
}

fill заявление, чтобы убедиться, что я знал, что он включается / выключается правильно. Это я'

мы слышали, используяsort вариант, но яМне неясно, как это будет реализовано для "выбран» элемент к вершине.

ОБНОВИТЬ:

Я исправил мою конкретную ситуацию с помощью следующего кода, который добавляет новую дугу в SVG наmouseover событие, чтобы показать изюминку.

svg.selectAll("path")
    .data(d)
  .enter().append("path")
    .attr("d", arc)
    .attr("class", "arc")
    .style("fill", function(d) { return color(d.name); })
    .style("stroke", "#fff")
    .style("stroke-width", 0)
    .on("mouseover", function(d) {
        svg.append("path")
          .attr("d", d3.select(this).attr("d"))
          .attr("id", "arcSelection")
          .style("fill", "none")
          .style("stroke", "#fff")
          .style("stroke-width", 2);
    })
    .on("mouseout", function(d) {
        d3.select("#arcSelection").remove();
    });