D3多个SVG对象跟随路径

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

// 创建路径生成器
var pathGenerator = d3.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; });

// 创建路径数据
var pathData = [
  { x: 100, y: 100 },
  { x: 200, y: 200 },
  { x: 300, y: 100 }
];

// 创建SVG对象
var circles = svg.selectAll("circle")
  .data(pathData)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("fill", "blue");

// 设置初始位置
circles.attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; });

// 添加动画
circles.transition()
  .duration(2000)
  .attrTween("cx", function(d) {
    return function(t) {
      var pathLength = pathGenerator.pathLength(pathData);
      var point = pathGenerator.pointAlongPath(pathData, t * pathLength);
      return point.x;
    };
  })
  .attrTween("cy", function(d) {
    return function(t) {
      var pathLength = pathGenerator.pathLength(pathData);
      var point = pathGenerator.pointAlongPath(pathData, t * pathLength);
      return point.y;
    };
  });