如何突出单个y轴网格线

Question

我正在寻找在曲线图的y轴上突出显示单个网格线的方法。

示例：在上图中，100K线应该更厚并且颜色不同！

由于我总是想要突出显示特殊y轴值的网格线，因此为给定的y值绘制单独的线可能更容易。有一种简单的方法可以做到这一点吗？

Answer 1

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

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

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

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

要获得更强大的方法，请查看第二个代码段。

＆＃13;

＆＃13;

var data = [{
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [50, 14, 33],
  type: 'bar'
}];

Plotly.newPlot('myDiv', data);

var line = Plotly.d3.selectAll('.ygrid').filter('.crisp').filter(function(d,i) {return i==1})
line.style("stroke", "rgb(255,0,0)")
line.style("stroke-width", "10px")

＆＃13;

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;">

＆＃13;

＆＃13;

＆＃13;

line_label定义我们要突出显示的刻度线旁边的标签。我们可以使用这样的事实：所有刻度标签都有相应的刻度线，而索引只有一个不同。

首先，我们使用正确的标签识别刻度标签，然后使用其索引来识别刻度线并修改其样式。

下面的代码段会生成带有随机刻度标签和刻度线的随机数据，但y == 20的行始终会突出显示。

＆＃13;

＆＃13;

var data = [{
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [Math.random()*100, 14, 33],
  type: 'bar'
}];

Plotly.newPlot('myDiv', data);

var line_label = '20';
var line_index = -1;
Plotly.d3.selectAll('.ytick').filter(function(d, i) {
    if (this.textContent == line_label) {
        line_index=i;
        return i;
    }
})

var line = Plotly.d3.selectAll('.ygrid').filter('.crisp').filter(function(d,i) {return i == line_index - 1})
line.style("stroke", "rgb(255,0,0)")
line.style("stroke-width", "10px")

＆＃13;

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;">

＆＃13;

＆＃13;

＆＃13;