Was ist eine effektive Methode, um ein SVG-Element mithilfe der D3-Bibliothek an die Spitze der Z-Reihenfolge zu bringen?

Mein spezielles Szenario ist ein Tortendiagramm, das hervorhebt (durch Hinzufügen von astroke zumpath), wenn sich die Maus über einem bestimmten Stück befindet. Der Codeblock zum Generieren meines Diagramms ist unten:

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

Ich habe ein paar Optionen ausprobiert, aber bisher kein Glück. Verwendenstyle("z-index") und anrufenclassed beides hat nicht funktioniert.

Die "Top" -Klasse ist in meinem CSS wie folgt definiert:

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

Dasfill Die Anweisung soll sicherstellen, dass ich weiß, dass sie richtig ein- und ausgeschaltet wurde. Es ist.

Ich habe mit gehörtsort ist eine Option, aber ich bin nicht sicher, wie es implementiert werden würde, um das "ausgewählte" Element nach oben zu bringen.

AKTUALISIEREN:

Ich habe meine spezielle Situation mit dem folgenden Code behoben, der dem SVG auf der Seite einen neuen Bogen hinzufügtmouseover Veranstaltung, um ein Highlight zu zeigen.

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