D3 - возврат строки таблицы в исходный bgcolor при наведении мыши

Question

Извиняюсь за вопрос новичка, но я пытаюсь сделать следующее, используя d3:

1) отображать чередующиеся строки в сером и белом цветах (стиль зебра) 2) выделять строки при наведении мыши 3) возвращать строку в исходное состояние при наведении мыши

Я сделал это с помощью следующего кода, который прекрасно работает, за исключением того, что при наведении мыши строки возвращаются к исходному цвету. Вместо этого он просто отображает каждую строку как #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 Индекс определяется для внутренней (стиль) функции обратного вызова. Вы хотите i индекс из функции обработки события mouseout:

 .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, поэтому первая строка считается нечетной.