Jaki jest skuteczny sposób na przeniesienie elementu SVG na szczyt kolejności Z, przy użyciu biblioteki D3?

Mój konkretny scenariusz to wykres kołowy, który podkreśla (dodającstroke dopath) gdy mysz jest nad danym kawałkiem. Blok kodu do generowania mojego wykresu znajduje się poniżej:

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

Wypróbowałem kilka opcji, ale do tej pory nie miałem szczęścia. Za pomocąstyle("z-index") i wołanieclassed oba nie działały.

Klasa „top” jest zdefiniowana w moim CSS w następujący sposób:

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

Thefill oświadczenie ma na celu upewnienie się, że wiem, że włącza się / wyłącza poprawnie. To jest.

Słyszałem za pomocąsort jest opcją, ale nie jestem pewien, w jaki sposób zostałaby zaimplementowana, aby doprowadzić „wybrany” element do góry.

AKTUALIZACJA:

Naprawiłem moją szczególną sytuację za pomocą następującego kodu, który dodaje nowy łuk do SVG namouseover wydarzenie, aby pokazać wyróżnienie.

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