I couldn't find any examples of how to do a simple interpolation for inner and outer arc radii. Most used the pie.layout which I didn't want to get into, or selected paths, or other things which seemed odd. This is heavily ripped off Mike Bostock's example: http://bl.ocks.org/mbostock/5100636

D3.js Arc tween to inner and outer radius.

var width = 960,
    height = 500,
    τ = 2 * Math.PI; // http://tauday.com/tau-manifesto

// An arc function with no values bound except the startAngle.
var arc = d3.svg.arc()
    .startAngle(0);

// Create the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don't need to position arcs individually.
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

var background = svg.append("path")
    .datum({
      endAngle: τ, 
      innerRadius: 100,
      outerRadius: 250
    })
    .style("fill", "#ddd")
    .attr("d", arc);

var foreground = svg.append("path")
    .datum({
      endAngle: .127 * τ,
      innerRadius: 230,
      outerRadius: 240
    })
    .style("fill", "orange")
    .attr("d", arc);

setInterval(function() {
  var outerR = Math.floor(Math.random() * (250 - 105)) + 105;
  foreground.transition()
      .duration(750)
      .call(arcTween, outerR-10, outerR);
}, 1500);

function arcTween(transition, newInner, newOuter) {

    transition.attrTween("d", function(d) {
    var interpolateInner = d3.interpolate(d.innerRadius, newInner),
        interpolateOuter = d3.interpolate(d.outerRadius, newOuter);

      return function(t) {

      d.outerRadius = interpolateOuter(t);
      d.innerRadius = interpolateInner(t);

      return arc(d);
    };
  });
}