如何突出顯示單個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軸之後的第一行。

當你有固定數量的刻度線和固定範圍時，它將起作用，否則你總是會突出顯示不同的行。

要獲得更健壯的方法，請查看第二個片段。

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定義了標籤的旁邊，我們要突出的刻度線。我們可以使用這樣一個事實，即所有的刻度標籤都有相應的刻度線，並且索引恰好相差一個。

首先我們找到帶有正確標籤的刻度標籤，然後使用它的索引標識刻度線並修改它的樣式。

下面的代碼片段會隨機生成帶有隨機刻度標籤和刻度線的數據，但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;">