D3.js 过渡高度堆积条形图

我这里有一个密码笔-

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

我想设置从下轴向上的杆高度的动画

当前，它从左向下设置动画

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

---

在过渡之前设置

x

位置、

宽度、
y
位置（作为基线）和高度（作为零）：

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

以下是更新的代码笔：

PS：单独转换每个矩形是个好主意。例如，如果用户单击了
usedInf
，则应仅转换这些矩形。。。然而，既然你这么做了

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

。。。在
drawChart
函数的开头，这是一种错误的方法，这样的建议将需要一个大的重构，超出了这个问题/答案的范围。
你能解释一下为什么
layersbarrea.selectAll（'g.layer'）.remove（）是错误的方法。这是一个选择还是会给我带来麻烦。我在另一个问题中问过如何处理这个问题，但没有得到回答。进入/退出/更新选择的整个逻辑是更新图表。但是，每次函数运行时，您都会擦除所有内容并重新绘制所有内容！那么，我的方法是否会被打破，或者它不会像可能的那样好。我该问什么问题？这不是一个问题。这包括知道如何在D3中创建这些选择。不幸的是，您不能在Stack Overflow要求提供教程。我建议您查看D3或其他资源上的一些书籍，搜索“进入/退出/更新选择”。是的，你的方法不好，在几种情况下都会失败。是的，y位置和高度。