plotly / plotly/plotly.js

“Error parsing” in empty axis

Aperta
#6,298 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug P3
Lingua principale
JavaScript
Stelle
18.3k
Fork
2k
Merge medio
2g 12h
PR unite (30g)
28

Descrizione

I have a probably not common issue, but also probably easy to fix. I have also posted it in the community, and I reproduce it here.

I have a plot (that I create with Python but I edit later on the html/js) that looks like this:
6707dfe749f7dff3cada935f8145053ab34b425a

When I open the html, there are errors on the console:

Error: Problem parsing d="MNaN,NaNHNaNMNaN,NaNHNaN"
Error: Problem parsing d="MNaN,NaNHNaNMNaN,NaNHNaN"

Although the graphs look fine, these errors are annoying (as there are many graphs like this on the page, and therefore many errors).
(I have tested many versions 2.XX and it always happen, including 2.14.0).
Also, what seems to be causing this is related to the black line of xaxis2 and yaxis2 (which is the top-right graph). This is how the layout looks like for this part:

xaxis2: {
  anchor: "y2",
  domain: [0.806, 1.0],
  mirror: true,
  ticks: "",
  linecolor: "black",
  showgrid: false,
  range: [0.0, 1.0],
  fixedrange: true,
  showticklabels: false,
},
yaxis2: {
  anchor: "x2",
  domain: [0.73, 1.0],
  mirror: true,
  ticks: "",
  linecolor: "black",
  showgrid: false,
  range: [0.0, 1.0],
  fixedrange: true,
  showticklabels: false,
},

If I comment out the linecolor: "black", the errors disappear.

I have created a (somewhat) minimal example here: https://codepen.io/filipesmg/pen/ZExmorL
However, the error is not showing directly in codepen (maybe because the error is inside plotly.js?) If that code is put inside <html>(...)</html>, it shows up. The linecolor lines are 640 and 652.

Investigating the plotly.min.js file while running the code, I noticed that the error comes from this part:

(Y.attr = function (e, r) {
if (arguments.length < 2) {
(...)
}
return this.each(K(e, r));
}),

which calls the function K(e,r) that has:

function(){this.setAttribute(e,r)}}

The problem is that in my example, at some point there seems to be no argument to the function (e,r), and r is undefined. There are many times where arguments.length = 1 or 2, but there are 2 times where it is undefined. In these cases, it doesn't enter the if (arguments.length < 2) and it goes to return this.each(K(e, r)); where it gives an error in the .setAttribute(e,r). Maybe a simple if ( ! r) { return; } would solve the issue, but I can't follow more the code to know if it'd affect other things.

I'm using 12.3.1, and I this error shows up in Safari 15.4 and in Chrome 104.0.5112.79, but not on Firefox 103.0.2.

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con l’esempio minimo di CodePen e l’HTML generato, concentrandoti sulle impostazioni linecolor di xaxis2/yaxis2 alle righe 640 e 652. Segui il percorso di plotly.min.js attraverso il codice attr/setAttribute mostrato e confronta i due casi con un argomento undefined; il lavoro è concluso quando il grafico riprodotto viene visualizzato senza errori di parsing nella console mantenendo le linee degli assi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript
Ambito
data-visualization
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.