¿Cuál es una forma efectiva de llevar un elemento SVG a la parte superior del orden z, usando la biblioteca D3?

Mi escenario específico es un gráfico circular que resalta (al agregar unstroke alpath) Cuando el ratón está sobre una pieza dada. El bloque de código para generar mi gráfico está abajo:

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);
    });

He probado algunas opciones, pero hasta ahora no he tenido suerte. Utilizandostyle("z-index") y llamandoclassed Ambos no funcionaron.

La clase "top" se define de la siguiente manera en mi CSS:

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

losfill La declaración está ahí para asegurarse de que sabía que se estaba activando / desactivando correctamente. Es.

He oído usandosort es una opción, pero no tengo claro cómo se implementaría para llevar el elemento "seleccionado" a la cima.

ACTUALIZAR:

Arreglé mi situación particular con el siguiente código, que agrega un nuevo arco al SVG en elmouseover evento para mostrar un punto culminante.

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();
    });