D3 : 지연 후 요소를 추가 한 후 전환

Question

D3.js로 시각화 한 매우 큰 CSV 파일이 있습니다. 데이터 필드 중 하나는 타임 스탬프이므로 (이 모든 정보를 한 번에 표시하는 대신) 타임 스탬프에 비례하는 지연 후에 svg 요소 (다른 데이터 필드를 기반으로)를 만든 다음 세 번에 걸쳐 페이드 아웃합니다 초. 데이터의 크기 때문에 보이지 않더라도 모든 요소를 ​​앞에 만들 수는 없습니다. 각 요소는 3 초 동안 만 존재해야합니다. 원하는 효과는 점으로 나타나 점차적으로 사라지고 사라지는 것입니다.

최선의 시도는 다음과 같습니다. 이 전략은 지연과 페이드 전환의 두 가지 전환을 사용하는 것입니다. 그것은 작동하지 않는 것보다는 오히려 모든 요소를 ​​한꺼번에 만듭니다 (페이딩은 작동합니다).

d3.csv(datafile).get(function(error, rows) { 
     for (var i = rows.length; i--;){ 
       var d = rows[i]; 
       plot.select("foo") // empty selection 
        .transition() 
        .delay(/*expression with d.timestamp*/) 
        .call(function(){ 
         plot.append("circle") 
          .attr(/*several, snip */) 
          .style("opacity", 1) 
          .transition() 
          .duration(3000) 
          .style("opacity", 0) 
          .remove() 
        }); 
     } 

    }); 

편집 2015년 4월이 질문을하기 때문에 많은 것을 배웠 데, 분명한 것은 0 불투명도 즉시 모든 것을 삽입하는 것 같다. 그런 다음 지속 시간 0을 만들고 가변 지연 트랜지션을 사용하여 1 개의 불투명도로 스냅 한 다음 거기에서 사라집니다. 또한 for-loop를 피하기 위해 중첩 된 선택을 사용하십시오. 나는 그것을 시도하지 않았다 그러나 는 일해야한다.

Answer 1

대신 setTimeout을 사용해 보셨습니까?

 rows.forEach(function(d, i){ 
      setTimeout(function(){ 
        plot.append("circle") 
         .attr(/*several, snip */) 
         .style("opacity", 1) 
         .transition() 
         .duration(3000) 
         .style("opacity", 0) 
         .remove() 
      }, /*expression with d.timestamp*/); 
     })