如何在d3.js中为路径上的多个圆设置动画？

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

// 创建路径元素
var path = svg.append("path")
  .attr("d", "M 100 100 L 400 100")
  .attr("stroke", "black")
  .attr("stroke-width", 2)
  .attr("fill", "none");

// 创建多个圆元素
var circles = svg.selectAll("circle")
  .data([50, 100, 150]) // 假设有三个圆，半径分别为50、100、150
  .enter()
  .append("circle")
  .attr("r", function(d) { return d; })
  .attr("cx", 100) // 初始位置为路径起点的x坐标
  .attr("cy", 100) // 初始位置为路径起点的y坐标
  .attr("fill", "red");

// 定义动画函数
var animation = d3.transition()
  .duration(2000) // 动画持续时间为2秒
  .ease(d3.easeLinear); // 缓动函数为线性

// 设置动画属性并启动动画
circles.transition(animation)
  .attrTween("cx", function() {
    var pathLength = path.node().getTotalLength();
    return function(t) {
      var point = path.node().getPointAtLength(t * pathLength);
      return point.x;
    };
  })
  .attrTween("cy", function() {
    var pathLength = path.node().getTotalLength();
    return function(t) {
      var point = path.node().getPointAtLength(t * pathLength);
      return point.y;
    };
  });