単一のy軸グリッド線を強調表示する方法

Question

私は、プロットチャートのy軸上の単一のグリッド線を強調表示する方法を探しています。

例：上段で100Kラインが厚く、異なる色であるべきです！

私はいつも特別なy軸値のグリッド線を強調したいので、与えられたy値に対して別の線を引く方が簡単かもしれません。これを行う簡単な方法はありますか？

Answer 1

クラスとインデックスで水平方向のティックラインを選択し、styleを変更することができます。

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

水平目盛り線のクラスは、ygrid crispとその指標、すなわちx軸の後の最初の行、0から始まります。

固定数のティックラインと固定範囲がある場合は動作します。そうしないと、常に異なるラインが強調表示されます。

より堅牢なアプローチについては、2番目のスニペットをご覧ください。

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")

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

---

line_label我々が強調表示したい目盛りラインに次のラベルを定義します。すべての目盛ラベルに対応するティックラインがあり、インデックスがちょうど1つであるという事実を利用することができます。

最初に、正しいラベルでティックラベルを識別し、そのインデックスを使用してティックラインを識別し、そのスタイルを変更します。

以下のスニペットでは、ランダムな目盛りラベルとティックラインを含むランダムデータを生成しますが、y == 20の行は常にハイライト表示されます。

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")

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