Question

非常感谢这里的人们，特别是AmeliaBR和我以前的问题。现在我遇到了一个新的，但类似的。

我试图将两个表相互关联，这样当鼠标悬停在一个表格上时，它会突出显示另一个表格中的相关行。它工作正常，只要我在一个表上没有一行只有标题信息，在这种情况下，在该表上行选择是一行关闭。我希望有一些方法可以为该行编写.on（“mouseover，SelectData”），以便我可以使用与我在另一个表中使用的相同的函数（以及下面示例中未显示的其他对象））。

在此示例中，顶部表按预期工作，底部表是一个关闭。底部表格中还有一个隐藏的行，这个行很重要，但会抛弃所有内容。

http://fiddle.jshell.net/g8z5h/7/

另外，任何关于从数据对象自动填充这些表的数据都将非常受欢迎。

Answer 1

如果您将表格分成<thead>部分而不是<tbody>部分，则可以使选择器仅定位属于表格主体的行：

http://fiddle.jshell.net/g8z5h/8/

d3.select(".DataDetail").select("tbody tr:nth-child(" + (i+1) + ")")
    .classed("highlight", true);

您也可以使用

d3.select(".DataDetail").select("tbody").select("tr:nth-child(" + (i+1) + ")")
    .classed("highlight", true);

（如果你动态追加行，它只会有所不同，在这种情况下使用后一版本，以便你添加的行插入<tbody>。）

我不确定你想用隐藏的行做什么。目前它正在被选中，背景颜色与任何其他行的颜色相同，你只是看不到它。

如果你想忽略行数中的隐藏行，它会变得有点棘手。 CSS选择器不能为你做计数 - I tried使用基于类的选择器来排除隐藏行，然后使用nth-of-type（与nth-child）进行计数，但是nth-of-type count仍然基于所有行，而不仅仅是与选择器其余部分匹配的行。

相反，您可以使用d3过滤器查找具有匹配索引的行。但是，要确保d3选择基于正确的索引（不包括隐藏行），您仍需要确保选择器仅匹配常规行。由于它是具有不同类值的隐藏行，这意味着使用:not(selector)语法：

d3.select(".DataDetail").selectAll("tbody tr:not(.hidden)")
    .on("mouseover", SelectData)
    .on("mouseleave", SelectNone);

function SelectData(d, i) {
    SelectNone(d,i);

    d3.select(".SelectPanel" + Coord(i))
        .classed("highlight", true);
    d3.select(".DataDetail").selectAll("tbody tr:not(.hidden)")
        .filter(function(d2,j) {return j===i;})
        .classed("highlight", true);
}

请注意，为了确保将正确的索引i传递给事件处理函数，添加事件侦听器时使用的选择器也必须排除隐藏的行。

http://fiddle.jshell.net/g8z5h/10/

鼠标悬停效果除了表格中的第一行外

1 个答案: