Javascript 如何高亮显示单个y轴栅格线

我正在寻找在绘图仪的y轴上高亮显示单个网格线的方法

示例：在上面的图表中，100K线应该更粗并且颜色不同

---

因为我总是想突出显示一条特殊y轴值的网格线，所以为给定的y轴值画一条单独的线可能更容易。有没有一种简单的方法可以做到这一点？

您可以按其类别和索引选择水平刻度线，然后更改其

样式

Plotly.d3.selectAll('.ygrid').filter('.crisp').filter(function(d,i) {return i==1})

水平刻度线的类别为
ygrid-crisp
，其索引从0开始，即x轴后的第一行

当您有固定数量的刻度线和固定范围时，它将起作用，否则您将始终高亮显示不同的线

要获得更健壮的方法，请查看第二个代码段


var数据=[{
x:[‘长颈鹿’、‘猩猩’、‘猴子’]，
y:[50,14,33]，
类型：'bar'
}];
Plotly.newPlot（'myDiv'，数据）；
var line=Plotly.d3.selectAll（'.ygrid'）.filter（'.crisp'）.filter（函数（d，i）{return i==1}）
线条样式（“笔划”、“rgb（255,0,0）”）
线条样式（“笔划宽度”、“10px”）
您可以按其类别和索引选择水平刻度线，然后更改其
样式

Plotly.d3.selectAll('.ygrid').filter('.crisp').filter(function(d,i) {return i==1})

水平刻度线的类别为
ygrid-crisp
，其索引从0开始，即x轴后的第一行

当您有固定数量的刻度线和固定范围时，它将起作用，否则您将始终高亮显示不同的线

要获得更健壮的方法，请查看第二个代码段


var数据=[{
x:[‘长颈鹿’、‘猩猩’、‘猴子’]，
y:[50,14,33]，
类型：'bar'
}];
Plotly.newPlot（'myDiv'，数据）；
var line=Plotly.d3.selectAll（'.ygrid'）.filter（'.crisp'）.filter（函数（d，i）{return i==1}）
线条样式（“笔划”、“rgb（255,0,0）”）
线条样式（“笔划宽度”、“10px”）

嗨，Maximilian，您的解决方案很有效-谢谢。但你说得对，我将突出显示不同的行，如果范围会随着时间的推移而变化，因为我的图表的值是从数据库动态派生的，并且每个月都会变化。。。也许也可以通过y值选择粗线？？？@Bongowen：请参阅更新的答案，以获得稳定灵活的解决方案。嗨，Maximilian，你的解决方案很有效-谢谢。但你说得对，我将突出显示不同的行，如果范围会随着时间的推移而变化，因为我的图表的值是从数据库动态派生的，并且每个月都会变化。。。也许也可以通过y值选择粗线？？？@Bongowen：请参阅更新的答案，以获得稳定灵活的解决方案。