How to animate multiple circles on a path in d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// Define the data
const data = [10, 20, 30, 40, 50];

// Create a SVG element
const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// Define the path
const path = d3.line()([[100, 100], [200, 200], [300, 100], [400, 200], [500, 100]]);

// Create a group element to contain the circles
const group = svg.append("g");

// Bind the data to the group element
group.datum(data);

// Append a circle element for each data point
const circles = group.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("fill", "steelblue");

// Set the initial position of each circle on the path
circles.attr("cx", (d, i) => path.getPointAtLength(i / data.length * path.getTotalLength()).x)
  .attr("cy", (d, i) => path.getPointAtLength(i / data.length * path.getTotalLength()).y);

// Animate the circles along the path
circles.transition()
  .duration(2000)
  .attrTween("transform", translateAlongPath(path))
  .ease(d3.easeLinear);

// Function to move the circles along the path
function translateAlongPath(path) {
  return function(d, i, a) {
    return function(t) {
      const point = path.node().getPointAtLength(t * path.node().getTotalLength());
      return "translate(" + point.x + "," + point.y + ")";
    };
  };
}