D3.js 在D3中以可变速度设置多行打印动画

我正在尝试设置多条路径的动画，其中每条路径在通过后续部分时以可变速度绘制。路径应同时开始绘制（但可能在不同时间结束）。我用它作为参考，但它只画了一条线

我分别绘制了每条路径和每条线段的长度，但是动画没有开始，我认为我在最后几行中没有正确地访问速度

以获取完整视图，但突出部分如下所示。这里怎么了

var lengthAt = [];
for (var i = 0; i < 3; i++) {

  start = i;
  end = i + 2;

  var path = svg.selectAll(".line")
    .data(lineData)
    .enter().append("path")
    .attr("d", function (d) { return line(d.values.slice(start, end)) })
    .style("stroke", "red")
    .style("stroke-width", .5)
   // .attr("class", "temppath")
   // .attr("visibility", "hidden");

  // get length at each segment 
  lengthAt.push([path["_groups"][0][0].getTotalLength(),
                 path["_groups"][0][1].getTotalLength()])
};

//svg.selectAll('.temppath').remove();
console.log({ lengthAt }) // looks good!

// Add the full path
var path = svg.selectAll(".line")
    .data(lineData)
    .enter()
    .append("path")
    .attr("d", function (d) { return line(d.values) })
    .style("stroke", "black")
    .attr('stroke-width', 2)
    .attr("fill", 'none');

// get the lengths of each path
var totalLength = [path["_groups"][0][0].getTotalLength(),
                   path["_groups"][0][1].getTotalLength()]

/////////////////////////////////////////////////////////////////////
/////////////////// START THE ANIMATION PROCESS /////////////////////

path.attr('stroke-dasharray', totalLength + " " + totalLength)
        .attr('stroke-dashoffset', totalLength)

var transitionFrom = path;

// start at 1 since no transition needed to first point
// iterate through "transitionFrom" and chain from point to 
// point, using the speed from the data.
for (var i = 1; i < 4; i++) {

  console.log(i)
  console.log(lengthAt[i - 1])
  lineData.forEach(function(d){ console.log(d.values[i].speed)})

  transitionFrom = transitionFrom.transition()
    .duration(function (d) { return d.values[i].speed })
    .ease(d3.easeLinear)
    .attr("stroke-dashoffset", lengthAt[i - 1] || 0)
}

var lengthit=[]；
对于（变量i=0；i<3；i++）{
开始=i；
结束=i+2；
var path=svg.selectAll（“.line”）
.数据（线条数据）
.enter（）.append（“路径”）
.attr（“d”，函数（d）{返回行（d.values.slice（start，end））}）
.style（“笔划”、“红色”）
.style（“笔划宽度”，.5）
//.attr（“类”、“临时路径”）
//.attr（“可见性”、“隐藏”）；
//获取每个段的长度
lengthit.push（[path[“_groups”][0][0]。getTotalLength（），
路径[“_组”][0][1]。getTotalLength（）
};
//selectAll（'.temppath'）.remove（）；
console.log（{lengthit}）//看起来不错！
//添加完整路径
var path=svg.selectAll（“.line”）
.数据（线条数据）
.输入（）
.append（“路径”）
.attr（“d”，函数（d）{返回行（d.values）}）
.style（“笔划”、“黑色”）
.attr（'stroke-width'，2）
.attr（“填充”、“无”）；
//获取每条路径的长度
var totalLength=[path[“_groups”][0][0]。getTotalLength（），
路径[“_组”][0][1]。getTotalLength（）]
/////////////////////////////////////////////////////////////////////
///////////////////启动动画过程/////////////////////
path.attr（'stroke-dasharray'，totalLength+“”+totalLength）
.attr（'stroke-dashoffset'，总长度）
var transitionFrom=路径；
//从1开始，因为不需要转换到第一个点
//迭代“transitionFrom”和从点到点的链
//点，使用数据中的速度。
对于（变量i=1；i<4；i++）{
控制台日志（i）
log（lengthAt[i-1]）
lineData.forEach（函数（d）{console.log（d.values[i].speed）}）
transitionFrom=transitionFrom.transition（）
.duration（函数（d）{返回d.values[i].speed}）
.ease（d3.easeLinear）
.attr（“笔划dashoffset”，长度[i-1]| | 0）
}

这个问题的解决方案分为两部分。首先，我进行重构以使用forEach（）和each（）而不是循环。独立/参数化动画通过使用链式变换完成

 // start the circle along the path
 var transitionFrom = circle.transition()
        .duration(eachGuy[1].speed)
        .attrTween("transform", getPath(mySegments[0].node()));

  // iterate through every segment and chain the transitions
  for (i = 1; i < 3; i++) {
    transitionFrom = transitionFrom.transition()
      .duration(eachGuy[i + 1].speed)
      .attrTween("transform", getPath(mySegments[i].node()))
  }

  // This is based off of Mike Bostock's example (linked below)
  function getPath(path) {
    var l = path.getTotalLength();
    return function () {
      return function (t) {
        var p = path.getPointAtLength(t * l);
        return "translate(" + p.x + "," + p.y + ")";
      };
    };
  };

//沿路径开始圆
var transitionFrom=circle.transition（）
.duration（每个用户[1]。速度）
.attrTween（“transform”，getPath（mySegments[0].node（））；
//迭代每一段并链接过渡
对于（i=1；i<3；i++）{
transitionFrom=transitionFrom.transition（）
.持续时间（每次[i+1]。速度）
.attrTween（“转换”，getPath（mySegments[i].node（））
}
//这是基于Mike Bostock的例子（链接如下）
函数getPath（path）{
var l=path.getTotalLength（）；
返回函数（）{
返回函数（t）{
var p=path.getPointAtLength（t*l）；
返回“translate”（“+p.x+”，“+p.y+”）；
};
};
};

全小提琴是最好的

资源：

• 如果您正在逐步设置线的动画，则可能会指向您 正确的方向

---

\u集团

不是公共API的一部分，请不要使用它；如果我使用path.node（）.getTotalLength（），那么我只能得到第一条路径的长度。