plotly / plotly/plotly.js

[BUG]: Polar plot zoom function wipes internal layout settings and incorrect range for dblclick zoomout function

Abierto
#7,594 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

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

Descripción

Description

Haven't seen if this is an issue in other plot types, but currently working on a polar plot.

There is a problem when if you initialize a plot with empty traces with autorange: true or with range not specified and then update the data, the zoomout dbl click does not accurately zoom out to the full range of the dataset, it defaults to a range of [0, 1].

Secondly the zoom button from the barmenu will wipe some layout settings of the plot.
For example in a polar plot dragmode: false disable user to rotate the plot. However when the user zooms in,
the user is able to rotate the plot.

The following code snippet will be able to reproduce the above mentioned issues on codepen.

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-3.1.2.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var data = [
    {
        r: Array(8).fill(0),
        // r: [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
        theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
        name: "11-14 m/s",
        marker: { color: "rgb(106,81,163)" },
        type: "barpolar"
    },
    {
        // r: [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
        r: Array(8).fill(0),
        theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
        name: "8-11 m/s",
        marker: { color: "rgb(158,154,200)" },
        type: "barpolar"
    },
    {
        // r: [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
        r: Array(8).fill(0),
        theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
        name: "5-8 m/s",
        marker: { color: "rgb(203,201,226)" },
        type: "barpolar"
    },
    {
        // r: [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],
        r: Array(8).fill(0),
        theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
        name: "< 5 m/s",
        marker: { color: "rgb(242,240,247)" },
        type: "barpolar"
    }
];


var layout = {
    title: {
        text: "Wind Speed Distribution in Laurel, NE"
    },
    font: { size: 16 },
    legend: { font: { size: 16 } },
    polar: {
        radialaxis: {
            ticksuffix: "%",
            angle: 45
        },
        angularaxis: {
            direction: "clockwise"
        }
    },
    dragmode: false
};

var newData = {
    r: [
        [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
        [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
        [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
        [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5]
    ]
};

const updatedLayout = {
    polar: {
        radialaxis: {
            range: [0, 100] // Update only the radial axis range
        }
    }
};

Plotly.react("myDiv", data, layout);
Plotly.update("myDiv", newData);

Steps to reproduce
  1. Plot unable to be rotated
  2. Click on zoom on plot bar menu
  3. Select area in plot to zoom in
  4. Bug reproduced
    • Plot able to be rotated
  5. Double click in plot to zoom out
    • Unable to zoom out to full range
    • Radial axis range set to [0, 1]
Notes

Also if you use Plotly.update("myDiv", newData), although only range was meant to be set, other radialaxis layout settings was reset from the update

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 proporcionada usando Plotly.react y Plotly.update, centrándote en los gráficos polares, los controles de zoom, autorange y el zoomout mediante doble clic. El payload no menciona archivos ni pruebas del repositorio; se considera terminado cuando se conservan ajustes del layout como dragmode y la configuración de radialaxis, y se restaura todo el rango de datos después del zoomout.

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
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.