title: d3 Animate chart when hovering over a table
body: <p>I'm rather new to d3 so please go easy on me. </p>
  
  <p>I have finally gotten a donut chart to work. When I hover over slices of the donut chart, they separate successfully, and display in the way I would like. I have added a new table to the page, and the data in the table mimics the data represented by the chart. I was wondering if there would be a way to animate the slices in the same way that they do when I hover over one, when I hover over it's corresponding table's entry. </p>
  
  <p>Any help is greatly appreciated!!</p>
  
  <p>P.S, If there is a much easier way to populate the table, which I assume there is, feel free to share that information as well!</p>
  
  <p><a href="http://jsfiddle.net/2vh8tgq6/" rel="nofollow">Here</a> is the fiddle link!</p>
  
  <pre><code>$('#testtable tr').hover(function() {
      $(this).addClass('hover');
  }, function() {
       $(this).removeClass('hover');
  });
  </code></pre>
  
  <p>This is how I'm hovering over the table now, </p>
  
  <pre><code>            .on("mouseover", function(d) {
                  d3.select(this).select("path").transition()
                      .duration(100)
                      .attr("d", arcOver);
              })
              .on("mouseout",function(d){
                  div.html(" ").style("display","none");
                  d3.select(this).select("path").transition()
                     .duration(100)
                     .attr("d", arc);
              });
  </code></pre>
  
  <p>And this is hovering over the slices. </p>