Повторяющиеся переходы в d3 с использованием setInterval

Question

В следующем коде у меня всего 5 баров, соответствующих их значениям в наборе данных. С .each и setInterval, я пытаюсь есть переход бар цвета заливки от черного до красного несколько раз, если соответствующее значение в наборе данных меньше 3.

<script type="text/javascript"> 

var w=500; 
var h = 100; 
dataset = [1,2,3,4,5]; 

var svg = d3.select("body") 
.append("svg") 
     .attr("width",w) 
     .attr("height",h); 

    svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect") 
     .attr("y", 0) 
     .attr("x", function(d,i){ return i*21;}) 
     .attr("width",20) 
     .attr("height",function(d){return d*10;}) 
     .each(function(d){ 
      if (d<3) { 
       setInterval(function(){d3.select(this) 
        .attr("fill","black") 
        .transition() 
        .duration(1000) 
        .attr("fill","red")},1000); 
      } 
     }); 


    </script> 

Когда я запускаю этот код, я получаю ошибку:

Uncaught TypeError: Object [object global] has no method 'setAttribute' 

любые идеи о том, как сделать эту работу? Я открыт для любого решения, я просто хочу иметь его так, чтобы бара будет пульсировать, если она находится под определенным значением. Спасибо.

Answer 1

Переменная this не будет иметь то же значение в новом контексте. Следующий код должен работать.

.each(function(d){ 
     var that = this; 
     if (d<3) { 
      setInterval(function(){d3.select(that) 
       .attr("fill","black") 
       .transition() 
       .duration(1000) 
       .attr("fill","red")},1000); 
     } 
});