title: Updating SVG Element Z-Index With D3
body: <p>What is an effective way to bring an SVG element to the top of the z-order, using the D3 library?</p>
  
  <p>My specific scenario is a pie chart which highlights (by adding a <code>stroke</code> to the <code>path</code>) when the mouse is over a given piece.  The code block for generating my chart is below:</p>
  
  <pre><code>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);
      });
  </code></pre>
  
  <p>I've tried a few options, but no luck so far.  Using <code>style("z-index")</code> and calling <code>classed</code> both did not work.</p>
  
  <p>The "top" class is defined as follows in my CSS:</p>
  
  <pre><code>.top {
      fill: red;
      z-index: 100;
  }
  </code></pre>
  
  <p>The <code>fill</code> statement is there to make sure I knew it was turning on/off correctly.  It is.</p>
  
  <p>I've heard using <code>sort</code> is an option, but I'm unclear on how it would be implemented for bringing the "selected" element to the top.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I fixed my particular situation with the following code, which adds a new arc to the SVG on the <code>mouseover</code> event to show a highlight.</p>
  
  <pre><code>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();
      });
  </code></pre>