Mise à jour d'un Élément SVG Z-Index Avec D3

Ce qui est un moyen efficace pour apporter un élément SVG vers le haut de l'axe z, à l'aide de la D3 de la bibliothèque?

Mon scénario est un graphique qui met en évidence (par l'ajout d'un stroke à la path) lorsque la souris est sur une pièce donnée. Le bloc de code pour la génération de mon tableau ci-dessous:

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

J'ai essayé quelques options, mais pas de chance jusqu'à présent. À l'aide de style("z-index") et de l'appel de classed les deux n'ont pas de travail.

Le "top" de la classe est définie comme suit dans mon CSS:

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

La fill déclaration est là pour s'assurer que je savais que c'était allumer/éteindre correctement. Il est.

J'ai entendu à l'aide de sort est une option, mais je suis pas clair sur la façon dont il sera mis en œuvre pour amener les "sélectionnés" l'élément vers le haut.

Mise à JOUR:

Je fixe ma situation avec le code suivant, qui ajoute un nouvel arc pour la SVG sur le mouseover évènement pour montrer une évidence.

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