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