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