d3 Animate chart when hovering over a table

Question

I'm rather new to d3 so please go easy on me.

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.

Any help is greatly appreciated!!

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!

Here is the fiddle link!

$('#testtable tr').hover(function() {
    $(this).addClass('hover');
}, function() {
     $(this).removeClass('hover');
});

This is how I'm hovering over the table now,

            .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);
            });

And this is hovering over the slices.

Answer 1

Build the table with d3 and then bind mouseover and mouseout events to the <tr>s. Also, no need for jQuery here, let d3 handle it all.

// column headers
var keys = ["Date","Value","Rate","Type"];

// add the headers 
d3
    .select("#testtable")    
    .append("tr")
    .selectAll(".head")
    .data(keys)
    .enter()
    .append("th")
    .attr("class","head")
    .text(function(d) { return d; });    

// add the rows
d3
    .select("#testtable")
    .selectAll(".dataRow")
    .data(data)
    .enter()
    .append("tr")
    .attr("class","dataRow")
    .on("mouseover", function(d,i) {
        // make the row red
        d3.select(this)
            .style("background-color","red");
        // find your path and transition
        var path = paths[0][i];
        d3.select(path).transition()
                    .duration(100)
                    .attr("d", arcOver);
    })
    .on("mouseout",function(d,i){
         d3.select(this)
            .style("background-color","transparent");
        var path = paths[0][i];
        d3.select(path).transition()
        .duration(100)
        .attr("d", arc);
    });

// add table data
d3.selectAll("#testtable .dataRow")
   .selectAll("td")
   .data(function(row) {
       return keys.map(function(d) {
           return {value: row[d]};
       });
   })
   .enter()
   .append("td")
   .html(function(d) { return d.value; });

Updated fiddle here.