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

Try начальную высоту в вашем выборе входа:

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