Javascript 在面积图d3中的路径末端追加一行

我试图在面积图路径的末尾追加一条线。我所在区域最困难的部分是动画。我有一个clipPath，它的宽度从

width:0

转换为

width:960

，并且末尾的行与它一起移动，因此应该同步。此外，该行顶部的文本也需要在进行时进行更新

期望输出：

我最初的想法是构建一个图表区域，添加一个clipPath，然后在区域图表中添加一个条形图，这样我就可以根据附加的条形图更新文本，但是条形图不在区域图表中。在面积图中放置条形图有什么不对，或者有更好的解决方案吗

//面积图宽度和高度
常数宽度1=1000，
高度1=100；
//定义面积图的x和y比例
const xScale1=d3.scaleTime（）.range（[0，width1]）；
常量yScale1=d3.scaleLinear（）.range（[height1，0]）；
//定义条形图的x和y范围
设xScale2=d3.scaleBand（）.range（[0，width1]）；
设yScale2=d3.scaleLinear（）.range（[height1，0]）；
//将SVG添加到#面积图
常数svg1=d3
.选择（“#面积图”）
.append（'svg'）
.attr（'viewBox'，'0${width1}${height1}`）
.attr（'transform'，'translate（'+0+'，'+-50+'））；
常量g1=svg1.append（'g'）；
//获取数据
d3.json(
'https://api.coronavirus.data.gov.uk/v1/data?filters=areaName=United%2520Kingdom；areaType=概览和结构=%7B%22areaType%22:%22areaType%22，%22areaName%22:%22areaName%22，%22areaCode%22:%22areaCode%22，%22date%22:%22date%22%22newCasesByPublishDate%22:%22newCasesByPublishDate%22%22cumCasesByPublishDate%22:%22cumCasesByPublishDate%22%7D&format=jso不
)
.then（功能（数据）{
log（'DATES SLICED-->'，data.data.slice（30281））；
//加载数据后定义xScale1和yScale1域
yScale1.domain([
0,
d3.最大值（数据、数据、函数（d）{
return+d.cumCasesByPublishDate；
}),
]);
xScale1.domain(
d3.范围（数据、数据、功能（d）{
返回新日期（d.Date）；
})
);
//面积发生器
常数面积=d3
1.区域（）
.曲线（d3.曲线后）
.x（（d）=>xScale1（新日期（d.Date）））
.y1（（d）=>yScale1（+d.cumCasesByPublishDate））
.y0（yScale1（0））；
g1.append（'路径'）
.基准（数据.数据.切片（30200））
.attr（'d'，区域）
.classed（'placeholder-layer'，true）
.style（'fill'，'#dadada'）
.style（'opacity'，'0.3'）；
//用于面积图填充动画的clipPath
constclip=g1.append（'clipPath'）.attr（'id'，'clip'）；
const clipRect=clip.append（'rect'）.attr（'width'，0）.attr（'height'，750）；
g1.append（'路径'）
.基准（数据.数据.切片（30200））
.attr（'d'，区域）
.attr（'clip-path'，'url（#clip'））
.classed（'overlay-layer'，true）
.style（'填充'，'黄色'）
.style（'opacity'，'0.3'）；
g1.append（'line'）.attr（'stroke-width'，960.）.style（'stroke'，'yellow'）；
克里普雷克特
.transition（）
.持续时间（10000）
.ease（d3.easeLinear）
.attr（'width'，960）；
//条形图的x和y域
xScale2.domain（data.data.slice（30200）.map（（d）=>newdate（d.Date））；
yScale2.domain([
0,
d3.最大值（数据、数据、函数（d）{
return+d.cumCasesByPublishDate；
}),
]);
g1.选择全部（'rect'）
.数据（数据.数据.切片（30200））
.输入（）
.append（'rect'）
.style（'填充'，'红色'）
.attr（'width'，xScale2.bandwidth（）*10）
.attr（'height'，（d）=>yScale2（+d.cumCasesByPublishDate））
.attr（'x'，0）
.attr（'y'，函数（d）{
返回yScale2（+d.cumCasesByPublishDate）；
})
.transition（）
.延迟（功能（d，i）{
返回i*30；
})
.attr（'x'，函数（d）{
返回xScale2（新日期（d.Date））；
})
.期限（100）；
})
//如果有错误，请记录它
.catch（（错误）=>console.log（错误））
我只使用一行，不使用条，使用with来更改文本


//面积图宽度和高度
常数宽度1=800，
高度1=250，
marginBottom=50
//定义面积图的x和y比例
const xScale1=d3.scaleTime（）.range（[0，width1]）；
const yScale1=d3.scaleLinear（）.range（[height1，marginBottom]）；
//定义条形图的x和y范围
设xScale2=d3.scaleBand（）.range（[0，width1]）；
设yScale2=d3.scaleLinear（）.range（[height1，marginBottom]）；
//将SVG添加到#面积图
常数svg1=d3
.选择（“#面积图”）
.append（'svg'）
.attr（'width'，width1）
.attr（“高度”，高度1）；
常量g1=svg1.append（'g'）；
//获取数据
d3.json(
'https://api.coronavirus.data.gov.uk/v1/data?filters=areaName=United%2520Kingdom；areaType=概览和结构=%7B%22areaType%22:%22areaType%22，%22areaName%22:%22areaName%22，%22areaCode%22:%22areaCode%22，%22date%22:%22date%22%22newCasesByPublishDate%22:%22newCasesByPublishDate%22%22cumCasesByPublishDate%22:%22cumCasesByPublishDate%22%7D&format=jso不
)
。然后（数据=>{
data.data.forEach（d=>{
d、 cumCasesByPublishDate=+d.cumCasesByPublishDate；
d、 日期=新日期（d.日期）；
});
返回data.data.slice（30200）；
})
.then（功能（数据）{
//加载数据后定义xScale1和yScale1域
yScale1.domain([
0,
d3.max（数据，d=>d.cumCasesByPublishDate），
]);
xScale1.domain(
d3.范围（数据，d=>d.date）
);
//面积发生器
常数面积=d3
1.区域（）
.曲线（d3.曲线后）
.x（（d）=>xScale1（d.date））
.y1（（d）=>yScale1（d.cumCasesByPublishDate））
.y0（yScale1（0））；
g1.append（'路径'）
.基准（数据）
.attr（'d'，区域）
.classed（'placeholder-layer'，true）
.style（'fill'，'#dadada'）
.style（'opacity'，'0.3'）；
//用于面积图填充动画的clipPath
constclip=g1.append（'clipPath'）.attr（'id'，'clip'）；
const clipRect=clip.append（'rect'）.attr（'width'，0）.attr（'height'，750）；
g1.append（'路径'）
.基准（数据）