Javascript d3将光标悬停在表格上时为图表设置动画

我是d3的新手，所以请对我放松点

我终于得到了一个甜甜圈图表。当我将鼠标悬停在甜甜圈图表的各个部分上时，它们成功地分开，并以我想要的方式显示。我在页面中添加了一个新表，表中的数据模拟了图表所表示的数据。我想知道是否有一种方法可以像我将鼠标悬停在一个切片上，当我将鼠标悬停在它对应的表条目上时那样，为切片设置动画

非常感谢您的帮助

另外，如果有一种更简单的方法来填充表格（我认为有），请随时分享这些信息

是小提琴的链接

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

这就是我现在在桌子上盘旋的方式

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

---

这是悬停在切片上

使用d3构建表，然后将

mouseover

和

mouseout

事件绑定到

s。另外，这里不需要jQuery，让d3来处理这一切

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

更新了小提琴。

供未来观众观看

@Mark answer是一个正确的解决方案，但我在Chrome和IE中翻译svg时遇到了一些问题：

在马克的小提琴第44行后面加上译文， 比如： .attr（“变换”、“平移”（“+chartWidth/2+”，“+chartHeight/2+”）

并从第31行中删除以平移元素，而不是整个元素

---

然后将var svg变量调整为g，它应该在Chrome中工作。IE是另一个故事

太棒了！这很好用。我正在试图弄清楚如何使相反的工作，以及现在，当鼠标悬停在一个切片上，表将突出显示。我假设这只是将高亮显示添加到圆弧的鼠标悬停事件中，但我正在尝试找出如何映射到表。有什么想法吗？嘿！看来我在学点东西。当我将鼠标移到弧上时，我已经选择并高亮显示了所有行，是时候找出如何选择正确的数据了。