title: D3 Pie Chart: Arctween in mouseOver doesn't work
body: <p>Problem: The Arctween function will not work on the .on("mouseOver").</p>
  
  <p>Intention: When hovering the arcs in the Pie Chart a highlight needs to start (opacity etc.) and information needs (infoHover) to show, next to the Arctween that I also want to activate.  </p>
  
  <p>I am aware that the code is not perfect at all,  I'm just experimenting with d3.js. </p>
  
  <p>Thanks in advance!</p>
  
  <p>Javascript:</p>
  
  <pre><code>d3.json("dataExample.json", function (data) {   
  
  var width = 260,
      height = 260;
  
  var outerRadius = height / 2 - 20,
      innerRadius = outerRadius / 3,
      cornerRadius = 10;
      colors = d3.scale.category20c(); 
  var tempColor;
  
  var pie = d3.layout.pie()
      .padAngle(.02)
      .value(function(d) {    
          return d.value;
      })
  
  var arc = d3.svg.arc()
      .padRadius(outerRadius)
      .innerRadius(innerRadius);
  
   var infoHover = d3.select('#chart').append('div')
      .style('position', 'absolute')
      .style('padding', '0 30px')
      .style('opacity', 0)
  
  function arcTween(outerRadius, delay) {
    return function() {
      d3.select(this).transition().delay(delay).attrTween("d", function(d) {
        var i = d3.interpolate(d.outerRadius, outerRadius);
        return function(t) { d.outerRadius = i(t); return arc(d); };
      });
    };
  }
  
  var svg = d3.select("#chart").append("svg")
      .data(data)
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .selectAll('path').data(pie(data)) 
    .enter().append('path')
      .attr('fill', function(d, i) {
          return colors(i); 
      })
      .each(function(d) { d.outerRadius = outerRadius - 20; })
      .attr('d', arc)
      .on("mouseover", function(d) {
  
          infoHover.transition()
              .style('opacity', .9)
              .style('left', '85px')
              .style('top', '120px')
  
          infoHover.html(d.value + '%')
  
          d3.selectAll("path")
              .transition()
              .duration(500)
              .style("opacity", .18)
  
          d3.select(this)
              .transition()
              .duration(500)
              .style('opacity', 1)
              .style('cursor', 'pointer')   
  
          arcTween(outerRadius, 0);
      })
  
      .on("mouseout", function(d) {
  
          d3.selectAll("path")
              .transition()
              .duration(500)
              .style("opacity", 1)
  
          d3.select(this)
              .style('opacity', 1)
  
          arcTween(outerRadius - 20, 150);
      }); 
  </code></pre>
  
  <p>});</p>