plotly / plotly/plotly.js

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

Abierto
#7,955 4 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug P3 size: 1
Lenguaje dominante
JavaScript
Estrellas
18.3k
Forks
2k
Merge medio
2 d 12 h
PR fusionados (30 d)
28

Descripción

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>

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con la reproducción de JavaScript proporcionada usando Plotly.react y el trace scattergl en modo lines+markers; amplía el zoom repetidamente para observar cuándo divergen las líneas y los puntos. Sigue el renderizado de scattergl y el comportamiento del zoom hasta que el manejo de las coordenadas quede claro, y después verifica que las líneas y los marcadores permanezcan alineados en niveles de zoom extremos.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript
Área
data-visualization
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Activo
Claridad
Bastante claro
Aptitud para principiantes
55/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.