title: d3.js can't change outer radius of arc
body: <p>I have some donut layout in my code:</p>
  
  <pre><code>    var cityPercentage=[50,30,20,10];
      var width=300,
          height=300,
          radius=100;
      var color=d3.scale.linear()
                  .domain([0,60])
                  .range(["red","blue"]);
      var cityDivision = d3.select("#cities")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", height)
                  .attr("class","span4");
      var group=cityDivision.append("g")
      .attr("transform","translate(" + width / 2 + "," + height / 2 + ")");
      var arc=d3.svg.arc()
          .innerRadius(radius-19)
          .outerRadius(radius);
      var pie= d3.layout.pie()
          .value(function(d){return d;});
  var arcs=group.selectAll(".arc")
      .data(pie(cityPercentage))
      .enter()
      .append("g")
      .attr("class","arc")
      .attr("id",function(d){return d.data;});
      arcs.append("path")
      .attr("d",arc)
      .attr("fill",function(d){return color(d.data);});
  </code></pre>
  
  <p>on mouse over I want it to enlarge it's outerRadius.
  Here is what I have:</p>
  
  <pre><code>    $(".arc").on("mouseover",(function(){
      console.log($(this).find("path"));
      $(this).find("path").transition()
      .duration(10)
      .attr("outerRadius",radius+20);
  }));
  </code></pre>
  
  <p>It says </p>
  
  <pre><code>Uncaught TypeError: undefined is not a function VM24:44
  (anonymous function) VM24:44
  jQuery.event.dispatch jquery.js:5095
  elemData.handle
  </code></pre>