d3.js 4.0—；轴线居中的折线图的网格线

几天前我开始熟悉d3.js。幸运的是，图书馆几周前进行了一次重大更新，许多现有资源现在已经过时。我已经成功地完成了我计划的大部分工作，但是现在我被困在了“在上面画网格线”的部分

我尝试过使用“勾选方法”，画新线，搜索带有网格线的图形，看看它们是如何工作的，等等，但都没有用。方法的名称已经改变，我并不总是很好地理解文档，所以这有点困难。如果有人能为我指出正确的方向，我将不胜感激

我把我的代码放在下面来说明我所说的“中心轴”是什么意思（实际上两者都是）

//数据
//路径数据
var contractHighRange=[
{“x”：-6，“y”：0.5}，
{“x”：-5，“y”：0.1}，
{“x”：-4，“y”：0.1}，
{“x”：-2，“y”：0.2}，
{“x”：-1，“y”：0.1}，
{“x”：0，y:-0.1}，
{“x”：1，“y”：-0.2}，
{“x”：2，“y”：-0.1}，
{“x”：3，“y”：-0.2}，
{“x”：4，“y”：0.2}，
{“x”：5，“y”：0.4}，
{“x”：6，“y”：0.5}
];
var contractLowRange=[
{“x”：-6，“y”：0.3}，
{“x”：-5，“y”：-0.1}，
{“x”：-4，“y”：-0.1}，
{“x”：-2，“y”：0}，
{“x”：-1，“y”：-0.1}，
{“x”：0，y:-0.3}，
{“x”：1，“y”：-0.4}，
{“x”：2，“y”：-0.3}，
{“x”：3，“y”：-0.4}，
{“x”：4，“y”：0}，
{“x”：5，“y”：0.2}，
{“x”：6，“y”：0.3}
];
var contractMiddleRange=[
{“x”：-6，“y”：0.4}，
{“x”：-5，“y”：0}，
{“x”：-4，“y”：0}，
{“x”：-2，“y”：0.1}，
{“x”：-1，“y”：0}，
{“x”：0，y:-0.2}，
{“x”：1，“y”：-0.3}，
{“x”：2，“y”：-0.2}，
{“x”：3，“y”：-0.3}，
{“x”：4，“y”：0.1}，
{“x”：5，“y”：0.3}，
{“x”：6，“y”：0.4}
];
//轴定义
轴的var收缩信息=[
{“名称”：“横坐标”，“x”：-6，“y”：6}，
{“名称”：“纵坐标”，“x”：-0.8，“y”：0.8}
];
散射点的var收缩信息=[
{“名称”：“qM”，“x”：-5.25，“y”：0.1}，
{“name”：“uM”，“x”：5，“y”：-3.5}，
{“名称”：“uSMi”，“x”：-2.75，“y”：0}，
{“名称”：“uSMa”，“x”：3.75，“y”：0}
];
//总体外观
var-margin={顶部：50，右侧：50，底部：50，左侧：50}；
变量宽度=1000-margin.left-margin.right；
变量高度=500-margin.top-margin.bottom；
//主SVG
var SVG容器=
d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//轴创建
var Xaxis量表=
d3.刻度线（）
.域名([
轴[0].x的压缩信息，
轴[0].y]的压缩信息）
.范围（[0，宽度]）；
var Yaxis量表=
d3.刻度线（）
.域名([
轴[1].x的收缩信息，
轴[1].y]的压缩信息）
.范围（[高度，0]）；
//轴生成
var Xaxis群=
SVG容器
.附加（“g”）
.attr（“变换”、“平移（0）”+（高度/2）+>）
.调用（d3.axisBottom（xAxisScale））；
亚克西斯集团=
SVG容器
.附加（“g”）
.attr（“变换”、“平移”（+width/2+），0）
.调用（d3.axisLeft（yAxisScale））；
//轴的名称
变量xAxisName=
SVG容器
.append（“文本”）
.attr（“变换”、“平移”（+（宽度/2）+），“+（高度+边距.top）+”）
.attr（“类”、“xAxisName”）
.文本（“xAxis”）；
var yAxisName=
SVG容器
.append（“文本”）
.attr（“y”，0-页边距。左）
.attr（“x”，0-（高度/2））
.attr（“dy”、“1em”）
.attr（“类”、“名称”）
.文本（“yAxis”）；
//线条创作
var线性函数=
d3.第（）行
.x（函数（d）{return xAxisScale（d.x）；}）
.y（函数（d）{return yAxisScale（d.y）；}）
.曲线（d3.曲线线）；
//行生成
高量程路径=
SVG容器
.append（“路径”）
.attr（“d”，线路功能（合同高量程））
.attr（“类”、“行高范围”）；
var收缩LowRangePath=
SVG容器
.append（“路径”）
.attr（“d”，lineFunction（合同下限））
.attr（“类”、“线下限”）；
距离路径变量=
SVG容器
.append（“路径”）
.attr（“d”，lineFunction（contractMiddleRange））
.attr（“类”、“中档”）；
//分散点
var ContractPoints创建=
SVG容器
.selectAll（“点”）
.数据（散射点的收缩信息）
.输入（）
.附加（“g”）；
//生成散点图
var合同点生成=
合同点创建
.附加（“圆圈”）
.attr（“r”，10）
.attr（“cx”，函数（d）{return xaxiscale（d.x）；}）
.attr（“cy”，函数（d）{return yAxisScale（d.y）；}）
.attr（“类”、“外圆”）；
var contractPointsText=
合同点创建
.selectAll（“文本”）
.数据（散射点的收缩信息）
.enter（）；
var contractPointsTextAttributes=
合同点文本
.append（“文本”）
.attr（“x”，函数（d）{return xaxiscale（d.x）；}）
.attr（“y”，函数（d）{return yaxiscale（d.y）+margin.top/2.5；}）
.attr（“类”、“合同点文本”）
.text（函数（d）{return“（“+d.name+”“+d.x+”，“+d.y+”））}）
h1{
颜色：深绿色；
}
.lineHighRange{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}
.lineLowRange{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}
.lineMiddleRange{
填充：无；
笔画：橙色；
笔画宽度：2px；
}
.外圆{
填充：暗色；
}
.contractPointsText{
文本锚定：中间；
字体系列：无衬线；
字体大小：12px；
}
yAxisName先生{
文本锚定：中间；
变换：旋转（-90度）；
}
.xAxisName{
文本锚定：中间；
}

线条图
演示-D34.0
我们可以在每个刻度上附加行，而不是更改D3轴刻度

首先，我们为每个轴设置类（
xAxis
和
yAxis
）。然后，我们选择刻度（
d3.selectAll（“g.yAxis g.tick”）
和
d3.selectAll（“g.xAxis g.tick”）