title: How to increase size of pie segment on hover in d3
body: <p>I created pie chart using d3.
  How to increase size of pie segment on hover?
  As you can see, green segment is so small so I want to change it size like red segment. How can I do this?</p>
  
  <p>My code:</p>
  
  <pre><code>var w = 400;
  var h = 400;
  var r = h/2;
  var color = d3.scale.category20c();
  
  var data = [{"label":"Category A", "value":20}, 
                    {"label":"Category B", "value":50}, 
                    {"label":"Category C", "value":30},
             {"label":"Category A", "value":20}, 
                    {"label":"Category B", "value":50}, 
                    {"label":"Category C", "value":30},
             {"label":"Category A", "value":20}, 
                    {"label":"Category B", "value":50}, 
                    {"label":"Category C", "value":5}];
  
  
  var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
  var pie = d3.layout.pie().value(function(d){return d.value;});
  
  // declare an arc generator function
  var arc = d3.svg.arc().outerRadius(r);
  var arcOver = d3.svg.arc()
          .outerRadius(r + 9);
  
  // select paths, use arc generator to draw
  var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
  arcs.append("svg: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 :)
          console.log(arc(d));
          return arc(d);
      })
       .on("mouseenter", function(d) {
              d3.select(this)
                 .attr("stroke","white")
                 .transition()
                 .duration(1000)
                 .attr("d", arcOver)             
                 .attr("stroke-width",6);
          })
          .on("mouseleave", function(d) {
              d3.select(this).transition()            
                 .attr("d", arc)
                 .attr("stroke","none");
          });;
  </code></pre>
  
  <p>There is example in js fiddle : <a href="http://jsfiddle.net/8huvuoj9/1/" rel="noreferrer">jsfiddle</a>
  Thanks.
  <img src="https://i.stack.imgur.com/dlfbF.jpg" alt="pie chart"></p>