Question

我在这里有一个codepen - 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位置（作为基线）和高度（为零）：< / p>

.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函数的开头，这是一个错误的方法，这样的建议需要一个大的重构，超出了这个问题/答案的范围。

过渡高度堆叠条形图

1 个答案: