javascript - d3条形图在加载时从高度0增长到条形

Question

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

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

  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) 行之后转换到属性。但这似乎不起作用。我错过了什么？谢谢。

标签： javascriptd3.js

Answer 1

尝试：

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