title: How do I increase the inner radius of a specific arc segment?
body: <p>I have a pie chart and I want to increase the inner radius of the arc the user mouses over.</p>
  
  <p>For example, if I mouse over the arc with 161, I want only the inner radius of that arc segment to increase.</p>
  
  <p>How would I do this?</p>
  
  <pre><code>// arc radius
  var radius = 200;
  var p = Math.PI *2; //full circle
  
  var data = [11,12,51,21,31,58,41,13,14,31,71,31,51,71,16,41,31,161];
  var data1 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];
  
  var width = 1000;
  var height = 1000;
  
  
  
  //========== color scale ==========//
  var colorScale = d3.scale.ordinal()
                     .range(['#FFEBEB', '#FFC2C2', '#FFADAD', '#FF9999', '#FF7070', '#FF5C5C', '#FF4747', 
                      '#FF1F1F', '#FF0A0A', '#F50000', '#CC0000', '#A30000', '#8F0000', '#660000', '#520000', '#3D0000', '#290000', '#140000']);
  
  //========== Create canvas and arc ==========//
  var canvas = d3.select("body")
                 .append("svg")
                 .attr("height", height)
                 .attr("width", width);
  
  var group = canvas.append("g")
                    .attr("transform", "translate(" + width/2 + ",500)");
  
  
  
  var arc = d3.svg.arc()
              .innerRadius(radius-50)
              .outerRadius(radius);
  
  var pie = d3.layout.pie()
              .value(function (d){return d;});
  
  var sorted = data.sort(function(a,b){return a-b});
  
  var arcs = group.selectAll(".arc")
                  .data(pie(sorted))
                  .enter()
                  .append("g")
                  .attr("class", "arc");
  
  
  arcs.append("path")
      .attr("d", arc)
      .style('stroke', 'white')
      .style('stroke-width', 2)
      .attr("fill", function(d, i){return colorScale(d.data);}); 
  
  arcs.append("text")
      .attr("transform", function(d){
          return "translate(" + arc.centroid(d) +")";
      })
      .attr("text-anchor", "middle")
      .text(function(d){return d.data});
  
  
  
  
  //======== mouse over/out =========//
  var prevColor;
  arcs.on("mouseover", function(d){
      prevColor = d3.select(this).select("path").attr("fill");
      d3.select(this).select("path")
        .attr("fill", "black");
      })
      .on("mouseout", function(d){
          d3.select(this).select("path")
            .attr("fill", prevColor);
      });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/64vFq/" rel="nofollow">http://jsfiddle.net/64vFq/</a></p>