What is an effective way to bring an SVG element to the top of the z-order, using the D3 library?

My specific scenario is a pie chart which highlights (by adding a `stroke` to the `path`) when the mouse is over a given piece. The code block for generating my chart is below:

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

```

I've tried a few options, but no luck so far. Using `style("z-index")` and calling `classed` both did not work.

The "top" class is defined as follows in my CSS:

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

```

The `fill` statement is there to make sure I knew it was turning on/off correctly. It is.

I've heard using `sort` is an option, but I'm unclear on how it would be implemented for bringing the "selected" element to the top.

**UPDATE:**

I fixed my particular situation with the following code, which adds a new arc to the SVG on the `mouseover` event to show a highlight.

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

```