Javascript d3动画中的持续时间

我尝试在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像素，但动画没有发生。

---

有人能解释一下我做错了什么吗？

您需要为宽度设置一个初始值，以便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);