plotly / plotly/plotly.js

[BUG]: Coupled hoverinfo tooltips are misaligned

Aperta
#7,664 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

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

Descrizione

Description

I have setup a coupled hover effect for two adjacent heatmaps using Fx.hover. As shown in the Gif below, the two hoverinfo boxes don't align. Technically, their arrows do point to the same locations in their respective heatmaps, but the left arrow points sharply upward and the right arrow points sharply downward. I think this makes the visualisation harder to interpret.

Screenshots/Video

This Gif shows the misaligned hoverinfo boxes.

Image

This screenshot shows the misalignment. I have drawn on the blue line for clarity. Note how the left tooltip is below the point, with its arrow pointing upwards, while the right tooltip is above the point, with its arrow pointing downwards. I feel like the tooltips should match one another and be aligned.

Image

These are the arrows that I get when the coupled hover effect is active.

Image

These are the 'standard' arrows that I get when the coupled hover effect is inactive. By this, I mean when I have commented-out the JavaScript that calls Fx.hover to update the tooltips. I would prefer if both tooltips had this style of arrow at all times, except for when the alternative style of arrow is really necessary.

Image
Steps to reproduce

I have attached two files. The Python file creates the plot and then injects the JS file, which handles the coupled hover interaction. Running the Python file creates an output.html file, which you can open in a browser and see the results shown above.

demo.js (~15 lines)
demo.py (~30 lines)

Notes

I considered hiding the tooltip arrows as in #7278 but that would make the issue worse, since the tooltip boxes do not line up with each other.

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

Esegui il demo.py allegato per generare output.html, quindi esamina demo.js e l’interazione Fx.hover accoppiata nel browser. Confronta le posizioni dei tooltip e le direzioni delle frecce per le due mappe di calore adiacenti; il lavoro è completato quando i tooltip di hover accoppiati sono allineati in modo coerente, mantenendo al contempo il comportamento standard delle frecce dove appropriato.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.