plotly / plotly/plotly.js

Chart overflows when URL changes

Offen
#5,871 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P3
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

Hi all,

Firstly, thanks for the amazing product!
I'm using Plotly in a single page application, which means that the URL changes a lot. Some of these changes are made without changing the contents of the page, or at least without changing the charts rendered with Plotly.

However, Plotly uses the entire URL of the page to generate a clip-path attribute in order to deal with overflowing charts. When the URL changes, the clip path isn't valid any more, and the chart breaks. The interesting thing is, it wouldn't have been an issue if the chart had been configured without window.location.href.

Would it be possible to make this setting configurable? The only workarounds I see are to either reload every time the URL changes, or to change the base tag in the HTML <head>, which seems like it would invite a lot of other problems. If you see any others, I'd love to hear about them.

I tried have a reproducible example in Codepen, but I couldn't easily set a URL on their iframe. Instead, I just invalidate the clip-path to show what happens: https://codepen.io/rubenhelsloot/pen/eYWKQyx. The actual bug happens in Chrome, but not in Firefox. I'm pretty sure that's because Firefox doesn't re-evaluate the SVG when the URL changes, and Chrome does.

Thanks in advance!

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der verknüpften CodePen-Reproduktion und bestätige den clip-path-Fehler, nachdem du die Seiten-URL in Chrome geändert hast. Verfolge, wo Plotly den clip-path aus window.location.href erzeugt, und ermittle dann, wie sich eine konfigurierbare Alternative verhalten würde, ohne die Handhabung des Chart-Überlaufs zu beeinträchtigen. Erledigt ist die Aufgabe, wenn das Chart nach URL-Änderungen weiterhin gültig bleibt und das Verhalten durch eine reproduzierbare Prüfung abgedeckt ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
data-visualization, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.