d3.v3 전환이 즉시 발생합니까?

Question

저는 최근 d3.v2에서 d3.v3으로 넘어 왔고 전환 메커니즘의 차이점을 이해하려고합니다.

아래의 코드에서 막대 그래프를 그릴 때 전환을 통해 높이가 증가하는 막대 그래프를 만들려고합니다. 이 코드는 d3.v2에서 문제없이 작동하지만 v3에서 전환이 즉시 발생합니다 (높이가 즉시 최종 값으로 설정 됨).

graph.enter()//for each bucket 
.append('g') 
.attr('transform',function(d,i){ return 'translate('+(xBand(i))+')';}) 
.attr('width',xBand.rangeBand()) 
.each(function(data,index){//here we are working on the selection for a single bucket 
     var $this=d3.select(this); //this refers to the group selection 
     var currentY=0; 
     var rects=$this.selectAll('rect') 
      .data(data.values); 

     rects.enter() 
     .insert('rect') 
     .attr('group-id',me.groupId) 
      .attr('y',Hats.accessor('y')) 
     .attr('width',xBand.rangeBand()) 
     .attr('fill',(function(elt){ return me.colors(me.groupId(elt));})); 

     rects.transition() 
     .duration(750) 
     .attr('height',(function(elt){ 
      var h=_.compose(heightScale,me.values)(elt); 
       d3.select(this).attr('y',currentY); 
       currentY+=h; 
       return h; 
     })); 
}); 

Answer 1

시도하여 입력 선택에서 시작 높이를 설정 :

rects.enter() 
    .insert('rect') 
    .attr('group-id',me.groupId) 
    .attr('y',Hats.accessor('y')) 
    .attr('width',xBand.rangeBand()) 
    .attr('fill',(function(elt){ return me.colors(me.groupId(elt));})) 
    .attr('height', 0); 

rects.transition() 
    .duration(750) 
    .attr('height',(function(elt){ 
     var h=_.compose(heightScale,me.values)(elt); 
      d3.select(this).attr('y',currentY); 
      currentY+=h; 
      return h; 
    }));