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

d3.v3转换瞬间发生？

1 个答案: