對錶中所有第一行的鼠標移動效果

Question

非常感謝這裏的人，特別是AmeliaBR與我以前的問題。現在我遇到了一個新的，但類似的。

我想將兩個表彼此關聯，以便當您將鼠標懸停在一個表上時，它會突出顯示另一個表上的相關行。它工作正常，只要我沒有一個表上只有標題信息的行，在這種情況下，該表上的行選擇是一行關閉。我希望有一些方法可以爲該行編寫.on（「mouseover，SelectData）」，這樣我就可以使用與在另一個表上使用的功能相同的功能（以及下面示例中未顯示的其他對象）。

在這個例子中按預期工作的頂級表，下表是一關，還有一個隱藏的行底部的表，這將是重要的，但投事事休。

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

另外，從數據對象自動填充這些表格的任何數據將是非常讚賞。

Answer 1

如果你br EAK你的表爲<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使用基於類的選擇器來排除隱藏的行，然後使用第n種類型（與第n個孩子相比）來進行計數，但是nth-of-類型計數仍然基於所有行，而不僅僅是與選擇器其餘部分匹配的行。

相反，您可以使用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/