[BUG]: When using scattergl and zooming in significantly, the lines and dots fail to align

Offen
#7,955 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
55/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
javascript
Bereich
data-visualization

Rechercherichtung

Beginne mit der bereitgestellten JavaScript-Reproduktion unter Verwendung von Plotly.react und dem scattergl-Trace im Modus lines+markers; zoome wiederholt hinein, um zu beobachten, wann die Linien und Punkte auseinanderlaufen. Verfolge das scattergl-Rendering und das Zoomverhalten, bis die Koordinatenverarbeitung klar ist, und überprüfe anschließend, dass Linien und Marker auch bei extremen Zoomstufen ausgerichtet bleiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug P3 size: 1
Description

When using scattergl, I found that if I zoom in too much, the lines and dots do not align properly.

Screenshots/Video

Video

Steps to reproduce

Click the "zoom" function in the toolbox and continuously zoom in on the points until the points and lines are misaligned.

JavaScript

<html>
  <head>
    <!-- Plotly.js -->
    <meta charset="UTF-8" />
    <script
      src="https://cdn.plot.ly/plotly-3.3.0.min.js"
      charset="utf-8"
    ></script>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #graphDiv {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="graphDiv"></div>
    <script>
      const rand = () => Math.random()
      var x = [1, 5, 10]
      var data = [
        {
          type: 'scattergl',
          mode: 'lines+markers',
          line: { color: '#b55400' },
          y: [0.000014, 0.000015, 0.000012],
          hoverinfo: 'skip',
        },
        {
          type: 'scattergl',
          mode: 'lines+markers',
        },
      ]

      var layout = {
        dragmode: 'pan',
        title: { text: '' },
        uirevision: 'true',
        xaxis: { zeroline: false, tickformat: ',d' },
        yaxis: { zeroline: false, tickformat: '.6f', automargin: true },
        responsive: true,
      }

      const graphDiv = document.getElementById('graphDiv')

      Plotly.react(graphDiv, data, layout, {
        displayModeBar: true,
        responsive: true,
      })
    </script>
  </body>
</html>
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus plotly/plotly.js

Alle Issues in plotly/plotly.js

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

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