當D3懸停在圓環圖切片上時，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。