title: d3 pie chart underlapping not overlapping
body: <p>I just created pie chart with the help of d3.js and applied some transition but the problem is,</p>
  
  <p><strong>When you hover on any arc, it is under-lapping with the 2 sides node/arc. I want it overlapping with the 2 sides node/arc.</strong></p>
  
  <p>Please help me.
  <strong>also I want when you hover, text font size will be increase.</strong></p>
  
  <p>Here is my code. </p>
  
  <pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var w = 400;
      var h = 400;
      var r = h/2;
      var color = d3.scale.category20c();
  
      var data = [{"label":"CATEGORY A"},
          {"label":"CATEGORY B"},
          {"label":"CATEGORY C"},
          {"label":"CATEGORY D"},
          {"label":"CATEGORY E"},
      ];
  
      var vis = d3.select('#chart').append("svg").data([data]).attr("width", w).attr("height", h).append("g").attr("transform", "translate(" + r + "," + r + ")");
      var pie_quadrant = d3.layout.pie().value(function(d){return 72;});
  
      // declare an arc generator function
      var arc_quadrant = d3.svg.arc().outerRadius(r);
  
      // select paths, use arc generator to draw
      var arcsslice_quadrant = vis.selectAll("g.slice").data(pie_quadrant).enter().append("g").attr("class", "slice");
      arcsslice_quadrant.append("path")
      .attr("fill", function(d, i){
          return color(i);
      })
      .attr("d", function (d) {
      // log the result of the arc generator to show how cool it is :)
          return arc_quadrant(d);
      })
      .on("mouseenter", function(d) {
  
      var endAngle = d.endAngle + 0.2;
      var startAngle = d.startAngle - 0.2;
  
      var arcOver_quadrant = d3.svg.arc()
      .outerRadius(r + 15).endAngle(endAngle).startAngle(startAngle);
  
      d3.select(this)
      .attr("stroke","white")
      .transition()
      .duration(1000)
      .attr("d", arcOver_quadrant)
      .attr("stroke-width", 3);
      })
      .on("mouseleave", function(d) {
          d3.select(this).transition()
          .attr("d", arc_quadrant)
          .attr("stroke","none");
      });
  
      arcsslice_quadrant.append("text")
      .attr("transform", function(d) {
          d.innerRadius = 0;
          d.outerRadius = r;
          return "translate(" + arc_quadrant.centroid(d) + ")rotate(" + angle(d) + ")";
      })
      .attr("class", "sliceText")
      .attr("x", 20) //Move the text from the start angle of the arc
      .attr("dy", 3) //Move the text from the start angle of the arc
      .attr("text-anchor", "middle")
      .attr("xlink:href", function(d, i) {
          return "#sliceArc_" + i;
      })
      .text(function(d, i) { 
          return data[i].label; 
      });
  
      // Computes the angle of an arc, converting from radians to degrees.
      function angle(d) {
        var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
        console.log(a);
        return a &gt; 90 ? a - 180 : a;
      }
  &lt;/script&gt;
  </code></pre>