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。

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

1 个答案: