D3路径跟随动画

Question

我正在使用path follow制作d3.js动画

我在实施它时遇到了一些问题。这是代码和我得到的错误：

let center_data = [Center_Lane]

let line = d3.line()
  .x(d => x_lane(+d.x))
  .y(d => y_lane(+d.y))
  .curve(d3.curveBasis)

let plot_lane = svg_lane.selectAll('path').data(center_data, d => d[0].Label)

plot_lane.enter()
  .append('path')
  .merge(plot_lane)
  .attr('class', d => (d[0].Label + ' lane'))
  //.transition().duration(50000)
  .attr('d', line)
  .attr('stroke', d => LineColors[LineNames.indexOf(d[0].Label)])
  //.transition()
  //.ease(d3.easeBounce)
  .attr('stroke-width', 2)
  .attr('fill', 'none')


//console.log(center_data)

let circle = svg_lane.append('circle')
  .attr('r', 2)
  .attr("transform", "translate(0," + -height / 3 + ")");

function transition() {
  circle.transition()
    .duration(5000)
    .attrTween("transform", translateAlong(plot_lane.node()))
    .on("end", transition);
}

transition();

// Returns an attrTween for translating along the specified path element.
function translateAlong(plot_lane) {
  //consloe.long(path)
  let l = plot_lane.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      let p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

基本上，该代码生成橙色路径并尝试为路径跟随运动设置动画。给我一些技巧和建议以实现它。 谢谢