plotly / plotly/plotly.js

Using opacityscale with surface results in ordering by addition order, not depth

Aperta
#4,918 13 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

Hi all, been using plotly with R for a while now and really loving it - thanks for assembling such a phenomenal program! I'd like to report a bug found while plotting multiple surface objects, which causes them to layer in the order they're added rather than the "depth" at which they should really render in the figure. See this codepen for code and examples, which are also rendered below as screenshots.

I previously posted in ropensci/plotly, but have since learned enough Javascript to assemble the codepen and the issue persists, making me think it's not an R problem. There's also no discussion of the new "opacityscale" feature there and a lively discussion here, making me hopeful that more people will have some idea how I might fix this if it isn't a bug.

This is great:

image

This is less great (same figure rotated to look from below):

image

It seems that the surface that renders always on "top" is the one that's added last in the data array. If we alter the above code a little bit to render the top layer surface before the middle one, we get some more interesting results:

Plotly.newPlot('graphDivReorderOpac', [data_z1, data_z3, data_z2]); rather than Plotly.newPlot('graphDivReorderOpac', [data_z1, data_z2, data_z3]);

image

image

Apologies for the repetitive code in the codepen - I really did learn just enough JS to make this one and will be hiding behind R wrappers in the future.

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 il CodePen collegato e gli esempi di superfici con opacityscale, confrontando i due ordini delle tracce e il rendering risultante dall’alto e dal basso. Segui il percorso di rendering delle superfici responsabile dell’ordinamento in profondità; il lavoro è concluso quando le superfici sovrapposte vengono renderizzate in base alla profondità anziché all’ordine dell’array di dati, preservando l’esempio funzionante senza opacityscale.

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.