So markieren Sie einzelne Y-Achse Gitterlinie

Question

Ich suche nach Weg, um eine einzelne Rasterlinie auf der Y-Achse eines Plotly-Diagramms zu markieren.

Beispiel: In der oberen Grafik sollte die 100K Linie dicker und in anderer Farbe sein!

Da ich immer eine Gitterlinie eines speziellen Y-Achsen-Wertes hervorheben möchte, kann es einfacher sein, eine separate Linie für einen gegebenen Y-Wert zu zeichnen. Gibt es einen einfachen Weg, dies zu tun?

Answer 1

Sie können die horizontalen Hilfslinien nach ihrer Klasse und ihrem Index auswählen und dann ihre style ändern.

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

der Klasse der horizontalen Linien ist tick ygrid crisp und deren Index beginnt bei 0, das heißt die erste Zeile nach der X-Achse.

Es funktioniert, wenn Sie eine feste Anzahl von Ticklinien und einen festen Bereich haben, sonst werden Sie immer eine andere Linie markieren.

Für einen robusteren Ansatz, werfen Sie einen Blick auf das zweite Snippet.

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 definiert das Etikett neben der Zecke Linie, die wir hervorheben möchten. Wir können die Tatsache verwenden, dass alle Tick-Label eine entsprechende Tick-Linie haben und der Index sich um genau eins unterscheidet.

Zuerst identifizieren wir das Tick-Label mit dem richtigen Label und verwenden dann seinen Index, um die Tick-Linie zu identifizieren und ihren Stil zu ändern.

Der folgende Ausschnitt erzeugt zufällige Daten mit zufälligen Hilfsstrichbeschriftungen und Hilfsstrichen, aber die Zeile für y == 20 ist immer hervorgehoben.

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