过渡高度堆积条形图

Question

我这里有一个密码笔 - https://codepen.io/anon/pen/GybENz

我创建了一个带有图例的简单堆积条形图来过滤图表。

我想从底部轴向上动画栏的高度。

目前它的动画从左到下

let layersBar = layersBarArea.selectAll('.layer').data(stackedSeries)
    .enter()
    .append('g')
    .attr('class', 'layer')
    .style('fill', (d, i) => {
        return colors[i];
    });

layersBar.selectAll('rect')
    .data((d) => {
        return d
    })

    .enter()
    .append('rect')

    .attr('height', 100)
    .transition()
    .duration(400)
    .attr('height', (d, i) => {
        return y(d[0]) - y(d[1]);
    })

    .attr('y', 0)
    .attr('y', (d) => {
        return y(d[1]);
    })

    .attr('x', (d, i) => {
        return x(d.data.date)
    })

    .attr('width', x.bandwidth());
}

Answer 1

设置x 位置、width、y 位置（作为基线）和高度（作为零）在过渡之前：

.attr('height', 0)
.attr("y", h - margin.bottom - margin.top)
.attr('x', (d, i) => {
    return x(d.data.date)
})
.attr('width', x.bandwidth())

这里是更新后的 CodePen：https://codepen.io/anon/pen/ypdoMK?editors=0010

PS：最好单独过渡每个矩形。例如，如果用户点击了usedInf，您应该只转换那些矩形...但是，既然您这样做了...

layersBarArea.selectAll('g.layer').remove();

...在您的 drawChart 函数的开头，这是一种错误的方法，这样的建议将需要一个很大的重构，超出了这个问题/答案的范围。