Javascript d3.js：图表外显示的网格线

我在图表中添加了一些网格线。现在我的问题是网格线没有与图表对齐

此外，在右侧图表的末尾添加了最后一条网格线。是否有可能防止这种情况发生，并且仅在x轴上的每个标签上添加一条线

我试图以某种方式将网格线添加到剪辑路径，但没有成功

我的网格线是这样创建的：

var信号数据={
信号1：{
名称：“信号1”，
数据：[1,2,3,4,1,2,3,4,1,2,1,2,2,3,5,4,1,4,2,9,7,5,7,4,6]，
},
信号2：{
名称：“信号2”，
数据：[6,4,8,5,4,8,4,3,5,4,5,8,7,2,9,5,4,1,2,6,0,5,7,1]，
},
信号3：{
名称：“信号3”，
数据：[9,5,12,3,8,4,8,6,3,4,7,8,5,2,1,8,6,8,5,8,4,8,5,1]，
},
}
var保证金={
前10名，
右:50,，
底数：40，
左:50,，
};
var width=window.innerWidth-margin.left-margin.right；
变量高度=230-margin.top-margin.bottom；
var最小权重=150-margin.top-margin.bottom；
var xScale=d3
.scaleLinear（）
.域名([
0,
d3.max（Object.keys（signalData），（d）=>signalData[d].data.length），
])//输入
.范围（[0，宽度]；//输出
var-xscale=d3
.scaleLinear（）
.域名([
0,
d3.max（Object.keys（signalData），（d）=>signalData[d].data.length），
])//输入
.范围（[0，宽度]；//输出
var zoomBrush=d3
.brushX（）
.范围([
[0, 0],
[宽度，最小重量]，
])
.on（“刷子”，zoomBrushed）
.on（“结束”，功能（事件）{
if（event.selection==null）{
重置缩放（）；
}
});
var selectBrush=d3
.brushX（）
.范围([
[0, 0],
[宽度、高度]，
])
.打开（“刷子”，选择刷子）
.on（“结束”，功能（事件）{
if（event.selection==null）{
重置选择（）；
}
});
函数resetZoom（）{
brushXScale.domain([
0,
d3.max（Object.keys（signalData），（d）=>signalData[d].data.length），
])；//输入
for（信号数据中的var信号）{
updateChart（signalData[signal].data，signalData[signal].name）；
}
}
函数zoomBrushed（）{
var selectionPx=d3.brushSelection（此）；//=[下，上]像素
//从像素到x值的变换
变量selectionX=[
xScale.invert（selectionPx[0]），
xScale.invert（selectionPx[1]），
];
//设置x比例域，然后重新绘制线
brushXScale.domain（selectionX）；
for（信号数据中的var信号）{
updateChart（signalData[signal].data，signalData[signal].name）；
}
}
函数resetSelection（）{
选择Brush.on（“结束”，空）；
d3.选择全部（“div[id^=signal]svg.brushcontainer”）。调用(
选择Brush.clear
);
选择Brush.on（“结束”，功能（事件）{
if（event.selection==null）{
重置选择（）；
}
});
}
函数selectBrushed（）{
var selectionPx=d3.brushSelection（此）；//=[下，上]像素
选择brush.on（“画笔”，空）；
d3.选择全部（“div[id^=signal]svg.brushcontainer”）。调用(
选择brush.move，
选择px
);
选择画笔。打开（“画笔”，选择画笔）；
}
//生成笔刷焦点图表
generateMinimap（signalData.signal1.data）；
//只要有信号，就动态生成图表
for（此.signalData中的var信号）{
generateChart（signalData[signal].data，signalData[signal].name）；
}
//此功能为一次性准备
函数generateChart（数据、名称）{
var svg=d3
.选择（“#”+名称）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
艾特先生(
“转化”，
翻译（“+margin.left+”，“+margin.top+”）
);
//网格线
函数Xgridlines（）{
返回d3.axisBottom（xScale）.ticks（10）；
}
svg
.附加（“g”）
.attr（“类”、“网格”）
.attr（“变换”、“平移（0）”、“高度+”）
.style（“笔划数组”、“3,3”）
.call（Xgridlines（）.tickSize（-height）.tickFormat（“”）；
//clipPath以防止路径溢出
svg
.append（“defs”）
.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
svg.append（“g”）.attr（“class”、“brushcontainer”）.call（selectBrush）；
svg
.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）；
svg.append（“g”）.attr（“class”，“y轴”）；
svg
.append（“路径”）
.attr（“剪辑路径”、“url（#剪辑）”）
.attr（“类”、“行”）//为样式指定一个类
.attr（“填充”、“无”）
.attr（“笔划”、“蓝色”）；
updateChart（数据、名称）；
}
//需要调用此函数来更新已准备好的图表
函数updateChart（数据、名称）{
var svg=d3。选择（“#”+name+svg”）；
var yScale=d3
.scaleLinear（）
.domain（[0，d3.max（数据）]）//输入
.range（[height，0]）；//输出
函数Ygridlines（）{
返回d3.axisLeft（yScale）.ticks（5）；
}
svg
.附加（“g”）
.attr（“类”、“网格”）
.attr（“变换”、“平移（0）”、“高度-”）
.style（“笔划数组”、“3,3”）
.打电话(
Ygridlines（）
.tickSize（-width-margin.left）
.tick格式（“”）
);
var线=d3
.第（）行
.x（（d，i）=>x刻度（i））
.y（（d）=>yScale（d））；
选择（“.x.axis”）.call（d3.axisBottom（brushXScale））；
选择（“.y.axis”）.call（d3.axisLeft（yScale））；
svg
.选择（“.行”）
.datum（data）//10.将数据绑定到行
.attr（“d”，line）；//11.调用行生成器
}
函数生成器映射（数据）{
var yScale=d3
.scaleLinear（）
.domain（[0，d3.max（数据）]）//输入
.range（[minimaphight，0]）；//输出
var线=d3
.第（）行
.x（（d，i）=>xScale（i））
.y（（d）=>yScale（d））；
var svg=d3
.选择（“小地图”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，最小重量+边距。顶部+边距。底部）
.附加（“g”）
艾特先生(
“转化”，
“平移（“+margin.left+”，“+margin