[BUG]: When using scattergl and zooming in significantly, the lines and dots fail to align
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 18.3k
- Forks
- 2k
- Ø Merge
- 2 T. 12 Std.
- Gemergte PRs (30 T.)
- 28
Beschreibung
Description
When using scattergl, I found that if I zoom in too much, the lines and dots do not align properly.
Screenshots/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>
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
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.
Bewertung
- Tech-Stack
- javascript
- Bereich
- data-visualization
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Aktiv
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 55/100