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

d3 动画中的持续时间

Duration in d3 animation

javascript

animation

d3.js