title: Text being covered by paths in d3 pie chart
body: <p>I'm attempting to follow along with the pie chart example for d3 at <a href="http://bl.ocks.org/mbostock/3887235" rel="nofollow noreferrer">http://bl.ocks.org/mbostock/3887235</a>.</p>
  
  <p>A minimal sample of my code:</p>
  
  <pre><code>const container = $('#graph-pie');
  const width = container.width() * 0.5;
  const height = 256;
  const radius = Math.min(width, height) / 2;
  
  const color = d3.scaleOrdinal()
      .range(['#869099', '#8c7853', '#007d4a']);
  
  const arc = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(0);
  
  const labelArc = d3.arc()
      .outerRadius(radius - 40)
      .innerRadius(radius - 40);
  
  const pie = d3.pie()
      .sort(null)
      .value((d) =&gt; { return d.value });
  
  const svg = d3.select('#graph-pie').append('svg')
      .attr('width', width)
      .attr('height', height)
  .append('g')
      .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')');
  
  const g = svg.selectAll('.arc')
      .data(pie(totals))
      .enter()
  .append('g')
      .attr('class', 'arc');
  
  g.append('path')
      .attr('d', arc)
      .style('fill', (d) =&gt; { return color(d.data.name) });
  
  g.append('text')
      .attr('transform', (d) =&gt; { return 'translate(' + labelArc.centroid(d) + ')' })
      .attr('dy', '.35em')
      .text((d) =&gt; {
          return names[d.data.name];
      });
  </code></pre>
  
  <p>The issue is that sometimes the text for the labels appears hidden behind the pie slices. I've noticed this happening mostly on Chrome, but I don't know that it isn't happening in other browsers. A few examples:</p>
  
  <p><a href="https://i.imgur.com/cSCBsNZ.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/cSCBsNZ.png" alt="Example 1"></a></p>
  
  <p><a href="https://i.imgur.com/3uODATR.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/3uODATR.png" alt="Example 2"></a></p>
  
  <p><a href="https://i.imgur.com/k1kdcvB.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/k1kdcvB.png" alt="Example 3"></a></p>
  
  <p>If it helps, the outputted SVG code is as follows:</p>
  
  <pre><code>&lt;div id="graph-pie" class="graph pie"&gt;
    &lt;svg width="668" height="256"&gt;
      &lt;g transform="translate(334,128)"&gt;
        &lt;g class="arc"&gt;
          &lt;path d="M7.225416114969383e-15,-118A118,118,0,0,1,98.56840842206363,-64.87117126383073L0,0Z" style="fill: rgb(134, 144, 153); z-index: 10;"&gt;
          &lt;text transform="translate(41.753394753534344,-77.46388853237056)" dy=".35em"&gt;Sensitive&lt;/text&gt;
        &lt;/g&gt;
        &lt;g class="arc"&gt;
          &lt;path d="M98.56840842206363,-64.87117126383073A118,118,0,0,1,-27.95807360901471,114.64007205193529L0,0Z" style="fill: rgb(140, 120, 83);"&gt;
          &lt;text transform="translate(71.92851960216296,50.69800851947991)" dy=".35em"&gt;Somewhat Sensitive&lt;/text&gt;
        &lt;/g&gt;
        &lt;g class="arc"&gt;
          &lt;path d="M-27.95807360901471,114.64007205193529A118,118,0,0,1,-2.167624834490815e-14,-118L0,0Z" style="fill: rgb(0, 125, 74);"&gt;
          &lt;text transform="translate(-87.37132713286675,-10.500056906587716)" dy=".35em"&gt;Tolerant&lt;/text&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried messing around with the z-index CSS style, but it doesn't have any effect, and it doesn't look like SVG elements have any similar attributes. How can I force my text elements to be rendered on top of my paths?</p>