plotly / plotly/plotly.js

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

オープン
#7,594 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

bug
主要言語
JavaScript
スター
18.3k
フォーク
2k
平均マージ
2日 12時間
マージ済み PR(30日)
28

説明

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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

Plotly.react と Plotly.update を使用した提供済みの再現から始め、極座標プロット、ズームコントロール、autorange、およびダブルクリックによる zoomout に焦点を当てます。payload ではリポジトリのファイルやテストは指定されていません。完了の条件は、dragmode などのレイアウト設定と radialaxis の構成を維持したまま、zoomout 後にデータ範囲全体を復元することです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
data-visualization
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。