将鼠标悬停在圆环图切片上时，D3 突出显示相应的表条目

Question

我开始使用 D3，昨天得到了一些帮助，让一些代码可以正常工作。我有一个新的快速问题。我有一个圆环图，表示一些即将成为 JSON 对象。当您将鼠标悬停在图表的某些部分上时，它们会动画并弹出。有一个由相同对象填充的对应表。我能够将表格中的数据映射出来，以便当您将鼠标悬停在数据上时，它会为相应的饼图切片设置动画。我也试图让它以相反的方式工作，这样当你将鼠标悬停在甜甜圈切片上时，它会突出显示表格。

目前，我让它突出显示整个表格，但我似乎无法弄清楚如何将其映射到单个和正确的表格条目。

Fiddle for context

我的弧形鼠标悬停在那里，我目前有它突出显示所有内容，

.on("mouseover", function(d) {
                d3.select(this).select("path").transition()
                    .duration(100)
                    .attr("d", arcOver);
                var path = paths[0][i];

                  d3.selectAll("#testtable .dataRow")
                    .style("background-color","red");  

有人可以就如何映射到正确的表条目提供一些帮助吗？

谢谢！

Answer 1

由于您的饼图和表格的顺序相同，您可以按索引进行：

.on("mouseover", function(d,i) {
    d3.select(this).select("path").transition()
        .duration(100)
        .attr("d", arcOver);
    var row  = d3.selectAll("#testtable .dataRow")[0][i]; // i is the index
    d3.select(row)
        .style("background-color","red");  
})

更新fiddle。