Animation 如何同步路径和区域的动画？

我被困在两行的和区域的D3.js v4的动画：

• 可以分别为直线和面积制作动画
• 组合两个动画时，即使在相同的过渡持续时间内，它们也不会同时出现
• 由于造型的原因，我不能放弃这条线

请参见下图：

要制作上述内容，我需要执行两大步骤：

通过设置属性

stroke dasharrow

和

stroke dashoffset

为线条制作动画。（灵感来源于）

通过调整d3.area（）函数的参数为区域制作动画（灵感来自）

结果相当令人失望，因为下面的线和区域并不平行

我的目标是模拟Highchart库，请参见示例及其下图：

Highchart库似乎使用了一种不同的动画技术，因为在DOM检查期间，动画中的DOM路径没有任何变化的迹象

如果有人能给我提出一些想法进行试验，我将不胜感激

我的代码示例如下：

让animationDuration=5000；
//设置图形的尺寸和边距
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=480-margin.left-margin.right，
高度=250-margin.top-margin.bottom；
//解析日期/时间
var parseTime=d3.timeParse（“%d-%b-%y”）；
//设定范围
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
//定义区域
变量面积=函数（基准，布尔值）{
返回d3.area（）
.y0（高度）
.y1（函数（d）{返回布尔值？y（d.close）：y（d.close）；}）
.x（函数（d）{返回布尔值？x（d.date）：0；}）
（数据）；
}
//界定界线
var valueline=d3.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.close）；}）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
var data=d3.csvParse（d3.select（“pre#data”）.text（）；
data.reverse（）；
//格式化数据
data.forEach（函数（d）{
d、 日期=解析时间（d.日期）；
d、 close=+d.close；
});
//缩放数据的范围
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.close；}）]；
//添加区域
追加（“路径”）
.数据（[数据]）
.attr（“类别”、“区域”）
.attr（“d”，d=>区域（d，假））
.attr（“填充”、“淡蓝色”）
.transition（）
.持续时间（动画持续时间）
.attr（“d”，d=>面积（d，真））；
//添加valueline路径。
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.attr（“d”，valueline）
.style（“笔划数组”，d=>{
让路径=document.querySelector（“.line”）；
const totalLength=path.getTotalLength（）；
返回`${totalLength}${totalLength}`；
})
.style（“笔划偏移量”，d=>{
让路径=document.querySelector（“.line”）；
const totalLength=path.getTotalLength（）；
返回`${totalLength}`；
})
.transition（）
.持续时间（动画持续时间）
.style（“笔划偏移量”，0）；
//添加X轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.调用（d3.左（y））
.line{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}
预#数据{显示：无；}

截止日期
5月1日至12日，58.13
2012年4月30日，53.98
2012年4月27日，67.00
2012年4月26日，89.70
2012年4月25日，99.00
4月24日至12130.28
4月23日至12166.70
1998年4月20日至12月34日
4月19日至12345.44
2014年4月18日43.34
4月17日至12543.70
4月16日至12580.13
4月13日至12605.23
12622.77年4月12日
11-Apr-12626.20
12628.44年4月10日
12636.23年4月9日
12633.68年4月5日
12624.31年4月4日
12629.32年4月3日
12618.63年4月2日
3月30日至12599.55
2003年3月29日至12609.86
12617.62年3月28日
12614.48年3月27日
1998年3月26日
有一种方法可以使用自定义插值器对线和区域设置动画

但是，由于您的目标是模仿这一点，因此有一种更简单的方法可供选择：使用

在我提出的解决方案中，我们以常规方式创建面积和线。但是，我们引用了一个剪辑路径

.attr("clip-path", "url(#clip)");

…在区域和线路上。剪切路径是使用
0
宽度创建的：

var clip = svg.append("clipPath")
    .attr("id", "clip");
var clipRect = clip.append("rect")
  .attr("width", 0)

然后，在此之后，只需将转换应用于剪裁路径：

clipRect.transition()
    .duration(5000)
    .ease(d3.easeLinear)
    .attr("width", someValue)

下面是一个演示：


var svg=d3.选择（“svg”）；
var data=d3.range（30.map）（d=>Math.random（）*150）；
var clip=svg.append（“clipPath”）
.attr（“id”、“clip”）；
var clipRect=clip.append（“rect”）
.attr（“宽度”，0）
.attr（“高度”，150）
var lineGenerator=d3.line（）
.x（（u，i）=>i*10）
.y（d=>d）
.curve（d3.curveMonotoneX）
var areaGenerator=d3.面积（）
.x（（u，i）=>i*10）
.y1（d=>d）
.y0（150）
.curve（d3.curveMonotoneX）
追加（“路径”）
.attr（“d”，区域生成器（数据））
.attr（“类别”、“区域”）
.attr（“剪辑路径”、“url（#剪辑）”）；
追加（“路径”）
.attr（“d”，线条生成器（数据））
.attr（“类”、“行”）
.attr（“剪辑路径”、“url（#剪辑）”）；
clipRect.transition（）
.持续时间（5000）
.ease（d3.easeLinear）
.attr（“宽度”，300）
.line{
填充：无；
冲程：#222；
笔画宽度：2px；
}
.区域{
填料：石灰土；
中风：无；
}

谢谢。发帖后,，