Updating SVG Element Z-Index With D3

Question

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…

Accepted Answer

One of the solutions presented by the developer is: "use D3's sort operator to reorder the elements." (see https://github.com/mbostock/d3/issues/252)

In this light, one might sort the elements by comparing their data, or positions if they were dataless elements:

```
.on("mouseover", function(d) {
    svg.selectAll("path").sort(function (a, b) { // select the parent and sort the path's
      if (a.id != d.id) return -1;               // a is not the hovered element, send "a" to the back
      else return 1;                             // a is the hovered element, bring "a" to the front
  });
})
```

Updating SVG Element Z-Index With D3

Solution

Problem

Related problems