Javascript 顶部和底部x轴之间的外部刻度大小不同

在以下示例中，底部轴和顶部轴之间的外部刻度大小（因此路径高度）不同。有人能解释一下原因吗？我找不到任何相关的答案

var宽度=100，
高度=100，
保证金=30；
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width）
.attr（'高度'），高度；
var x=d3.scaleLinear（）
.domain（[0,10]）
.范围（[边距，宽度-边距]）；
//添加轴
svg.append（“g”）
.attr（“变换”、“平移（0）”+（高度-边距）+”）
.attr（“类”、“xAxis”）
.call（d3.axisBottom（x）
.tickValue（[0,10]）
);
svg.append（“g”）
.attr（“转换”、“平移（0）”+（边距）+>）
.attr（“类”、“xAxis”）
.call（d3.axisTop（x）
.tickValue（[0,10]）
);
.xAxis路径{
笔画：黑色；
笔画宽度：4px；
}
.xAxis文本{
填充：黑色；
字体大小：14px；
}

您看到了什么不同吗？他们对我来说完全一样（镜像）。实际上，您可以在路径中看到这一点：
M30.5,6V0.5H70.5V6
和
M30.5，-6V0.5H70.5V-6
。不，它们不是。最小相差1像素（取决于屏幕分辨率和缩放）。尽管路径坐标看起来是相同的，但如果检查图元（路径高度），可以看到差异。如果叠加内部记号，也可以看到。您将看到主轴上的内部记号位置不同。例如add.xAxis行{stroke:red；stroke width:2px；}