对d3.js中的文本进行补间-向上计数

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建文本元素
var text = svg.append("text")
  .attr("x", 250)
  .attr("y", 250)
  .text("0");

// 定义补间函数
function tweenText() {
  text.transition()
    .duration(2000)
    .attr("y", 100)
    .text("10")
    .transition()
    .duration(2000)
    .attr("y", 50)
    .text("9")
    .transition()
    .duration(2000)
    .attr("y", 0)
    .text("8")
    .transition()
    .duration(2000)
    .attr("y", -50)
    .text("7")
    .transition()
    .duration(2000)
    .attr("y", -100)
    .text("6")
    .transition()
    .duration(2000)
    .attr("y", -150)
    .text("5")
    .transition()
    .duration(2000)
    .attr("y", -200)
    .text("4")
    .transition()
    .duration(2000)
    .attr("y", -250)
    .text("3")
    .transition()
    .duration(2000)
    .attr("y", -300)
    .text("2")
    .transition()
    .duration(2000)
    .attr("y", -350)
    .text("1")
    .transition()
    .duration(2000)
    .attr("y", -400)
    .text("0");
}

// 启动补间动画
tweenText();