javascript - d3 动画的持续时间

Question

我正在尝试像这样对 d3 中的矩形宽度进行动画处理:

svg.append("rect")
    .attr("x", 10)
    .attr("y", 20)
    .attr("height", 20)
    .style('fill',barColor)
    .transition()
    .attr("width", 200)
    .duration(1000)
    .delay(1000);

我尝试在 1 秒内将宽度增加到 200 像素，但动画没有发生。 有人可以解释一下我做错了什么吗？

Answer 1

您需要设置宽度的初始值，以便 D3 能够插值和过渡:

svg.append("rect")
  .attr("x", 10)
  .attr("y", 20)
  .attr("height", 20)
  .attr("width", 0)
  .style('fill',barColor)
.transition()
  .duration(1000)
  .attr("width", 200);