d3.js - 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;
    }));