d3에서 setInterval을 사용하여 반복 전환

Question

다음 코드에서 데이터 세트의 해당 값에 해당하는 5 개의 막대가 나타납니다. 반복 데이터 세트의 해당 값이이 코드를 실행하면 나는 오류 미만 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> 

경우 .each 및 setInterval을 통해, 나는 빨간색 검은 색의 막대 채우기 색상 전환을 위해 노력하고 있습니다 :

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); 
     } 
});