D3.js 滴答声不等于零，但雅克斯的第一个和最后一个滴答声显示了这条线

我有一张折线图。yAxis的第一个和最后一个记号显示了外线

结果如下图所示：

预期的结果是yAxis的每个记号都显示外线

例如：

这是我的代码：

var margin={top:70，right:30，bottom:50，left:40}
变量宽度=720-margin.left-margin.right
变量高度=430-margin.top-margin.bottom
风险值数据=[
{角度：0.6933744221879815，x:0.1}，
{角度：0.6933744221879815，x:0.1}，
{角度：0.6933744221879815，x:0.3}，
{角度：0.6933744221879815，x:0.4}，
{角度：0.6933744221879815，x:0.4}，
{角度：0.6933744221879815，x:0.5}，
{角度：0.6933744221879815，x:0.7}，
{角度：0.6933744221879815，x:0.8}，
{角度：0.6933744221879815，x:0.8}，
{角度：0.6933744221879815，x:0.9}，
{角度：0.6933744221879815，x:1}，
{角度：0.6933744221879815，x:1.1}，
{角度：0.6933744221879815，x:1.2}，
{角度：0.6933744221879815，x:1.3}，
{角度：0.6933744221879815，x:1.4}，
{角度：0.6933744221879815，x:1.5}
]
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（${margin.left}，${margin.top}）`）
var x=d3.scaleLinear（）
.范围（[0，宽度]）
.domain（[data[0].x，data[data.length-1].x]）
变量y=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[-30120]）
var xAxis=d3.axisBottom（）
.比例（x）
.tickValue（x.ticks（8）.concat（x.domain（）[0]））
.tickFormat（d=>d+'s'）
.1（8）
.滴答器（0）
var yAxis=d3.axisLeft（）
.比例（y）
.滴答声（8）
.tickSizeInner（-width）
.滴答器（4）
.1（8）；
var line=d3.line（）
.x（功能（d）{
返回x（d.x）；
})
.y（功能（d）{
返回y（d角）；
})
.曲线（d3.curveCatmullRom）；
append（'path'）
.attr（'d'，行（数据））
.attr（'stroke'，'#ff5722'）
.attr（'stroke-width'，'2'）
.attr（'fill'，'none'）；
append（'g'）
.呼叫（xAxis）
.attr（'transform'，'translate（0，${height}）`）
append（'g'）
.呼叫（yAxis）

。勾选行{
不透明度：0.2；
}
.勾选文本{
字体大小：12px；
}

---

没有丢失的记号，所有的内部记号都在那里！但是，它们会出现在图表的右侧，因为您这样做了：

yAxis.tickSizeInner(-width)

换句话说，你的浅灰色网格线就是你的记号

如果你想保留那些浅灰色的网格线，并画出规则的记号，你必须采取不同的方法。像这样：

svg.append('g')
    .call(yAxis)
    .selectAll(".tick")
    .append("line")
    .attr("x2", width)
    .style("stroke", "#eee")

以下是更改后的代码：

var margin={top:70，right:30，bottom:50，left:40}
变量宽度=720-margin.left-margin.right
变量高度=430-margin.top-margin.bottom
风险值数据=[
{角度：0.6933744221879815，x:0.1}，
{角度：0.6933744221879815，x:0.1}，
{角度：0.6933744221879815，x:0.3}，
{角度：0.6933744221879815，x:0.4}，
{角度：0.6933744221879815，x:0.4}，
{角度：0.6933744221879815，x:0.5}，
{角度：0.6933744221879815，x:0.7}，
{角度：0.6933744221879815，x:0.8}，
{角度：0.6933744221879815，x:0.8}，
{角度：0.6933744221879815，x:0.9}，
{角度：0.6933744221879815，x:1}，
{角度：0.6933744221879815，x:1.1}，
{角度：0.6933744221879815，x:1.2}，
{角度：0.6933744221879815，x:1.3}，
{角度：0.6933744221879815，x:1.4}，
{角度：0.6933744221879815，x:1.5}
]
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（${margin.left}，${margin.top}）`）
var x=d3.scaleLinear（）
.范围（[0，宽度]）
.domain（[data[0].x，data[data.length-1].x]）
变量y=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[-30120]）
var xAxis=d3.axisBottom（）
.比例（x）
.tickValue（x.ticks（8）.concat（x.domain（）[0]））
.tickFormat（d=>d+'s'）
.1（8）
.滴答器（0）
var yAxis=d3.axisLeft（）
.比例（y）
.滴答声（8）
.滴答器（4）
.1（8）；
var line=d3.line（）
.x（功能（d）{
返回x（d.x）；
})
.y（功能（d）{
返回y（d角）；
})
.曲线（d3.curveCatmullRom）；
append（'path'）
.attr（'d'，行（数据））
.attr（'stroke'，'#ff5722'）
.attr（'stroke-width'，'2'）
.attr（'fill'，'none'）；
append（'g'）
.呼叫（xAxis）
.attr（'transform'，'translate（0，${height}）`）
append（'g'）
.呼叫（yAxis）
.selectAll（“.tick”）
.附加（“行”）
.attr（“x2”，宽度）
.style（“笔划”、“eee”）

。勾选文本{
字体大小：12px；
}

---

谢谢。我终于用你的答案解决了这个问题。顺便说一句，为什么我们不能同时使用内刻度和外刻度？我的意思是为什么像

.tickSizeInner（-innerWidth）

和

.tickSizeOuter（6）

这样的东西不起作用？@PedramParsian你可以同时使用它们：

.tickSizeInner

和

。tickSizeOuter

设置不同事物的大小。