plotly / plotly/plotly.js

[BUG]: Automargin for quiver plots is a little off with `arrowref: 'paper'`

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

Nessuno ha ancora preso questa issue.

bug P2 plotly-internal size: 3
Lingua principale
JavaScript
Stelle
18.3k
Fork
2k
Merge medio
2g 12h
PR unite (30g)
28

Descrizione

Desired behavior

Quiver automargin should always result in an initial plot area which contains all arrow endpoints.

Current behavior

The current quiver implementation calculates the arrow endpoints assuming arrowref: 'data', uses those endpoints to compute the automargin extents, and then if arrowref is 'paper'`, applies an adjustment factor to the arrow endpoints.

If the x:y aspect ratio of the data is pretty close to 1:1, this works OK because the arrow endpoints don't change much. But if the aspect ratio of the data is very far from 1:1, this can result in an initial plot where the arrow endpoints extend outside of the plotted area.

Example
Figure definition:
{
  "data": [
    {
      "type": "quiver",
      "uhoverformat": ".3f",
      "yhoverformat": ".3f",
      "xhoverfomrat": ".3f",
      "vhoverformat": ".3f",
      "x": [0],
      "y": [0],
      "u": [1],
      "v": [0.1],
      "arrowref": "paper"
    }
  ],
  "layout": {
    "width": 800,
    "height": 600,
    "showlegend": false
  }
}

Screenshot:

Image

Notice how the tip of the arrow extends off the right side of the plot.

Fix

The relevant logic is around lines 200-206 in src/traces/quiver/calc.js.

It's a bit of a chicken-and-egg problem, because when arrowref is 'paper', the data position of the arrow endpoints depends on the axis scales, which depend on the position of the arrow endpoints. I think there is probably an algebraic solution but haven't quite been able to figure it out. Alternatively there's probably an iterative or approximate approach we could apply here that would still be an improvement over the current behavior.

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 in src/traces/quiver/calc.js intorno alle righe 200-206 e riproduci la figura quiver fornita con arrowref impostato su paper. Traccia il modo in cui vengono calcolati gli estremi delle frecce e le estensioni di automargin rispetto alle scale degli assi. Il lavoro è completato quando l'area iniziale del grafico contiene tutti gli estremi delle frecce, anche quando le proporzioni dei dati differiscono sostanzialmente da 1:1.

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à
Attiva
Chiarezza
Abbastanza chiara
Idoneità per principianti
55/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.