如何在d3.js图表中添加过渡效果

// 选择要添加过渡效果的元素
var circle = d3.select("svg").selectAll("circle");

// 定义初始状态
circle.attr("r", 0)
      .attr("cx", 0)
      .attr("cy", 0)
      .style("fill", "blue");

// 定义目标状态
circle.attr("r", 50)
      .attr("cx", 100)
      .attr("cy", 100)
      .style("fill", "red");

// 添加过渡效果
circle.transition()
      .duration(1000) // 过渡持续时间为1秒
      .delay(500) // 延迟0.5秒开始过渡
      .attr("r", 50)
      .attr("cx", 100)
      .attr("cy", 100)
      .style("fill", "red");

// 结束过渡效果
circle.transition()
      .duration(1000) // 过渡持续时间为1秒
      .delay(500) // 延迟0.5秒开始过渡
      .attr("r", 50)
      .attr("cx", 100)
      .attr("cy", 100)
      .style("fill", "red");