plotly / plotly/plotly.js

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

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

Dieses Issue hat noch niemand übernommen.

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

Beschreibung

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

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 bereitgestellten Reproduktion unter Verwendung von Plotly.react und Plotly.update und konzentriere dich dabei auf Polardiagramme, Zoom-Steuerelemente, autorange und das Herauszoomen per Doppelklick. Der Payload nennt keine Repository-Dateien oder Tests; abgeschlossen ist die Aufgabe, wenn Layouteinstellungen wie dragmode und die Konfiguration von radialaxis erhalten bleiben und nach dem Herauszoomen per Doppelklick der vollständige Datenbereich wiederhergestellt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
data-visualization
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.