Javascript d3条形图从高度0增长到加载时的条形图

尝试设置d3条形图的动画，以便加载时，所有条形图将从x轴从高度0优雅地“增长”到其缩放高度。相反，我的条形图只是从左上角“猛击”到svg

我的条形图按以下方式绘制：

  svg
.selectAll("rect")
.attr("height", 0)
.attr("y", (d) => y(0))
.data(data)
.join("rect")
.transition()
.duration(500)
.attr("x", (d, i) => x(i))
.attr("y", (d) => y(d.value))
.attr("height", (d) => y(0) - y(d.value))
.attr("width", x.bandwidth())
.delay((d, i) => i * 10);

我希望第2行和第3行作为条的起点，然后transition（）将允许它转换到.duration（500）行之后的属性。但它似乎不起作用。我错过了什么？谢谢。

试试：

svg
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("height", 0)
  .attr("y", (d) => y(0))
  .attr("x", (d, i) => x(i))
  .attr("width", x.bandwidth())
  .transition()
  .duration(500)
  .attr("y", (d) => y(d.value))
  .attr("height", (d) => y(0) - y(d.value));