D3 - 返回一個錶行原來的bgcolor鼠標移開時

Question

道歉新手的問題，但我嘗試做以下使用D3：

1）呈現交替行的灰色和白色（斑馬風格） 2 ）突出顯示mouseover事件上的行 3）在鼠標移出時將行返回到其原始狀態

我已經通過以下代碼完成了該操作，該操作可以很好地工作，除了在mouseout上將行返回到原始顏色。相反，它只是使鼠標移開時每行作爲＃c4c4c4

var rows = tbody.selectAll("tr") 
    data(states) 
    .enter() 
    .append("tr") 
    .style("background-color", function(d, i) { 
     if (i%2===0){return "#fff";}else{return "#c4c4c4";} 
     }); 


var rows = tbody.selectAll("tr") 
    .on("mouseover", function(){ 
     d3.select(this).style("background-color", "yellow");}) 
    .on("mouseout", function(){ 
     d3.select(this).style("background-color", function(d,i) { 
      if (i % 2 === 0){ 
       return "#fff"; 
      } 
      else { 
       return "#c4c4c4"; 
      } 
     } 
    )} 

Answer 1

的問題是，當你重新選擇this元素，成爲從中i指數爲內（風格）回調確定的選擇功能。你想從mouseout事件處理函數的i指數：

.on("mouseout", function(d,i){ //correct index is passed here! 

    d3.select(this).style("background-color", function(d2,j) { 
          //d2 will be the same as d, but j will always be 0 
          //since d3.select(this) only has one element 
     if (i % 2 === 0){ 
      return "#fff"; 
     } 
     else { 
      return "#c4c4c4"; 
     } 
    }) 
}); 

你並不真的需要聲明的參數d2和j，因爲他們從來沒有使用過 - 我只是包括他們清晰。

順便說一句，你可以做這兩種效應與CSS：

tr:nth-of-type(2n) { /* even rows */ 
    background-color: #c4c4c4; 
} 
tr:nth-of-type(2n+1) { /* odd rows */ 
    background-color: #fff; 
} 
tr:hover { /* mouseover */ 
    background-color: yellow; 
} 

注意，在CSS，元素從1開始編號，所以第一行被認爲是一個奇數行。