Animation d3设置多条线的动画线可以'；不可能完成

我想在线条上做一个动画，但是第二条线条将从两个部分绘制，一个从起点开始，另一个从靠近第二个最后一点的地方开始，然后消失，所以我得到了这样的结果

我在遵循别人的代码

 const pathLength = path.node().getTotalLength();
      const transitionPath = d3.transition().ease(d3.easeQuad).duration(3000);
      path
        .attrs({
          "stroke-dashoffset": pathLength,
          "stroke-dasharray": pathLength,
        })
        .transition(transitionPath)
        .attr("stroke-dashoffset", 0);

---

如果你需要所有的代码，我可以粘贴，但这真的只是这一部分的工作与动画，谢谢

我认为您无意中使用了两次相同的路径长度，即第一条路径的长度

path.node（）

返回第一个节点，即使选择中有多个节点

const数据=[{
类别：“系列1”，
价值观：[{
名称：“A”，
数值：10
},
{
名称：“B”，
价值：21
},
{
名称：“C”，
价值：19
},
{
名称：“D”，
价值：23
},
{
名称：“E”，
价值：20
},
],
}, ];
设计数器=1；
常量添加集=（arr）=>{
让copy=JSON.parse（JSON.stringify（arr[0]）；
const random=（）=>Math.floor（Math.random（）*20+1）；
常量添加=（arr）=>{
计数器++；
copy.values.map（（i）=>（i.value=random（））；
copy.category=`series_${counter}`；
arr.push（复制）；
};
添加（arr）；
};
添加_集（数据）；
//第一，定义svg
设图宽=600，
图形高度=300；
让边距={
排名：60，
右:10,，
底数：30，
左：45
};
让totalWidth=图形宽度+边距.left+边距.right，
总高度=图形高度+margin.top+margin.bottom；
设svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，总宽度）
.attr（“高度”，总高度）；
//2号定义主图形
让mainGraph=svg
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//第三，定义轴
让categoriesNames=data[0].values.map（（d）=>d.name）；
设xScale=d3
.scalePoint（）
.域名（分类名称）
.范围（[0，图形宽度]；//缩放点使轴以值开始，与缩放带比较
设colorScale=d3.scaleOrdinal（d3.schemeCategory 10）；
colorScale.domain（data.map（（d）=>d.category））；
设yScale=d3
.scaleLinear（）
.范围（[graphHeight，0]）
.域名([
d3.min（数据，（i）=>d3.min（i.value，（x）=>x.value）），
d3.max（数据，（i）=>d3.max（i.value，（x）=>x.value）），
]); //* 如果arrow函数只是返回一行代码，则可以省略语句括号和return关键字
//第4组轴
主图形
.附加（“g”）
.attr（“类”、“x轴”）
.attr（“转换”、“转换（0，+graphHeight+）”）
.call（d3.axisBottom（xScale））；
mainGraph.append（“g”）.attr（“class”，“y轴”）.call（d3.axisLeft（yScale））；
//第五，制造生产线
设lineGenerator=d3
.第（）行
.x（（d）=>xScale（d.name））
.y（（d）=>yScale（d.值））
.曲线（d3.curveMonotoneX）；
变量线=主图
.selectAll（“.path”）
.data（data.map（（i）=>i.value））
.输入（）
.append（“路径”）
.attr（“d”，线路生成器）
.attr（“填充”、“无”）
.attr（“笔划宽度”，3）
.attr（“笔划”（d，i）=>色标（i））；
//第6号附加圆
设circleData=data.map（（i）=>i.values）；
主图形
.selectAll（“.circle container”）
.数据（循环数据）
.输入（）
.附加（“g”）
.attr（“类”、“圆形容器”）
.attr（“填充”（d，i）=>console.log（d）| | colorScale（i））
.selectAll（“圆圈”）
.数据（（d）=>d）
.输入（）
.附加（“圆圈”）
阿特斯先生({
cx：（d）=>xScale（d.name），
cy：（d）=>yScale（d.值），
r:3，
不透明度：1，
});
//在这里，我们让线增长
线
.attr（“行程数组”，函数（d）{
//获取当前元素的路径长度
const path length=this.getTotalLength（）；
返回'0${pathLength}`
})
.transition（）
.持续时间（2500）
.attr（“行程数组”，函数（d）{
//获取当前元素的路径长度
const path length=this.getTotalLength（）；
返回`${pathLength}${pathLength}`
});
.line{
笔画：蓝色；
填充：无；
}

我通过“stroke dashoffset”：pathLength*1.5，“stroke dasharray”：pathLength*1.5来计算，欢迎更多解释