Jquery 如何在d3图形中y轴的点0上绘制额外的x轴

我想在x轴上画一条额外的线，它出现在y轴的0点上。图表是根据动态值创建的，因此无法提供固定位置。它需要读取点0出现的x轴位置，然后绘制直线。 我们不能对分直线，因为0位置可以在直线的任何位置，而不是特别在中间

下面添加了当前图形的代码

当前图形：

预期图形：

var数据=[{
“ErrorMessage”：空，
“Ymin”：-30，
“Ymax”：40，
“Xmin”：“2021-04-01 00:00:00”，
“Xmax”：“2021-04-08 00:00:00”，
“要点”：[{
日期：“2021-04-01 06:59:06”，
价值：3.43，
标签：“2021-04-01 06:59:06”，
数据：“框”
},
{
日期：“2021-04-02 07:02:05”，
价值：-18.43，
标签：“2021-04-02 07:02:05”，
数据：“框”
},
{
日期：“2021-04-03 07:12:06”，
价值：5.43，
标签：“2021-04-03 07:12:06”，
数据：“框”
},
{
日期：“2021-04-04 07:16:07”，
价值：20.43，
标签：“2021-04-04 07:16:07”，
数据：“框”
},
{
日期：“2021-04-03 05:12:20”，
价值：3.43，
标签：“2021-04-03 05:12:20”，
数据：“球”
},
{
日期：“2021-04-05 06:59:06”，
价值：3.43，
标签：“2021-04-05 06:59:06”，
数据：“球”
},
{
日期：“2021-04-06 07:02:05”，
价值：18.43，
标签：“2021-04-06 07:02:05”，
数据：“球”
},
{
日期：“2021-04-07 07:12:06”，
价值：5.43，
标签：“2021-04-07 07:12:06”，
数据：“球”
},
{
日期：“2021-04-07 07:16:07”，
价值：-20.43，
标签：“2021-04-07 07:16:07”，
数据：“BallC”
}
]
}];
功能负载图（数据）{
var points=parseData（data.points）；
chartDataLoaded（点数[0]、“#图表”、“我的数据维兹”、“度量工具提示”、“V”）
}
chartDataLoaded函数（数据、chartName、legendName、toolTipName、chartTitle、axisTitle）{
var points=parseData（data.points）；
DrawMultileData（points、data.Xmin、data.Xmax、data.Ymin、data.Ymax、chartName、legendName、toolTipName、chartTitle、axisTitle）；
}
函数chartDataFailed（数据）{
警报（“未能加载图表数据”）；
}
函数解析数据（点）{
var timeParser=d3.timeParse（“%Y-%m-%d%H:%m:%S”）；
var-arr=[]；
用于（以点为单位的var i）{
arr.push({
日期：timeParser（点[i].date），//日期
值：points[i]。值，//将字符串转换为数字
标签：点[i]。标签，
名称：点[i]。数据
});
}
控制台日志（arr）；
var expensesByName=d3.nest（）
.键（功能（d）{
返回d.name；
})
.参赛作品（arr）；
console.log（expensesByName）；
返回ExpenseByname；
}
chartDataLoaded（数据[0]、“#图表”、“我的数据维兹”、“度量工具提示”、“测试”、“V”）
函数DrawMultileData（数据、xmin、xmax、ymin、ymax、chartName、legendName、toolTipName、chartTitle、axisTitle）{
//#区域定义轮廓和参数
var宽度=500；
var高度=300；
var保证金=100；
var持续时间=250；
var lineOpacity=“0.25”；
var lineOpacityHover=“0.85”；
var otherLinesOpacityHover=“0.1”；
var lineStroke=“2px”；
var linestrokehaver=“3px”；
var circleOpacity='0.85'；
var circleOpacityOnLineHover=“0.25”
循环变异系数=4；
var circleRadiusHover=6；
//#端区
//#区域获取用户定义的颜色或随机
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
变量颜色={
};
//#端区
//最小值和最大值的时间分析器
var timeParser=d3.timeParse（“%Y-%m-%d%H:%m:%S”）；
//#区域创建轴和比例
var xScale=d3.scaleTime（）.rangeRound（[0，width]）.domain（[timeParser（xmin），timeParser（xmax）]；
var yScale=d3.scaleLinear（）.rangeRound（[height，0]）.domain（[ymin，ymax]）；
var xAxis=d3.axisBottom（xScale）.ticks（8）；
var yAxis=d3.轴左（yScale）；
/*添加SVG*/
var svg=d3.select（chartName.append（“svg”）
.attr（“宽度”，（宽度+边距+100）+“px”）//增加x轴到边缘的距离
.attr（“高度”，（高度+边距+100）+“px”）//增加y轴到边缘的距离
.append（'g'）
.attr（“transform”，`translate（${margin}，${margin}）`）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（'transform'，'translate（0，+height+'））//以开始x轴点
.呼叫（xAxis）
.selectAll（“文本”）
.attr（“变换”、“平移（-10,10）旋转（-45）”）
.style（“文本锚定”、“结束”）
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（'文本'）
.attr（“y”，150）
.attr（“x”，-30）
.style（“字体大小”、“14px”）
.style（“字体大小”、“粗体”）
.attr（“填充”、“千”）
.文本（标题）
//#端区
//#区域创建线
/*将行添加到SVG中*/
var line=d3.line（）
.x（d=>xScale（d.date））
.y（d=>yScale（d.value））；
让line=svg.append（'g'）
.attr（“类”、“行”）；
行。选择全部（“.行组”）
.data（data）.enter（）
.append（'g'）
.attr（'class'，'line group'）
.on（“鼠标悬停”，功能（d，i）{
选择（“.title text”）.remove（）；
svg.append（“文本”）
.attr（“类”、“标题文本”）
.style（“填充”，（颜色[d.key]==未定义）？颜色（d.key）：颜色[d.key]）
.文本（d.key）
.attr（“文本锚定”、“中间”）
.attr（“x”，（宽度-边距）/2）
.attr（“y”，5）；
})
.开启（“鼠标出”，功能（d）{
选择（“.title text”）.remove（）；
})
.append（'路径'）
.attr（'类'，'行'）
.attr（'d'，d=>行（d.values））
.style（'stroke'，（d，i）=>（颜色[d.key]==未定义）？颜色（d.key）：颜色[d.key]）
.style（'opacity'，lineOpacity）
.on（“鼠标悬停”，功能（d）{
d3.选择全部（“.line”）
.style（'opacity'，otherLinesOpacityHover）；
d3.选择全部（“.circle”）
.style（'opacity'，circleopacityOnline悬停）；
d3.选择（本）
.style（'opacity'，lineOpacityHover）
.style（“笔划宽度”，线条笔划悬停）
.样式（“光标”、“指针”）；
})
.
const yZero = yScale(0);
svg.append('line')
  .attr('x1', 0)
  .attr('x2', width)
  .attr('y1', yZero)
  .attr('y2', yZero)
  .style('stroke', '#000');