plotly / plotly/plotly.js

partial autorange gets overridden on subsequent `react` calls

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

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

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

説明

I'm encountering some unexpected behavior pertaining to the partial autorange changes added in v2.26, which lets users use autorange behavior for one axis bound, but use a hard bound for the other.

After spending time on a minimal reproduction, distilled the core problem to autorange and range properties on layout.yaxis being overridden on subsequent calls to Plotly.react. For added context, I'm using react-plotly, which seems to exacerbate the problem (because Plotly relies on mutating the props supplied), but I'll remove React from the equation int his report and just focus on the raw Plotly behavior.

See the codepen here:
https://codepen.io/billy-littlefield/pen/JjqyXgW

In this example, I have a simple bar graph where the largest bar has value 4. In my layout, I set

  • autorange: "min"
  • range: [null, 50]

with the intention of forcing the top bound to be 50.

The "rerender" button in the top-left will call Plotly.react with the same arguments as the initial call. You can reset the demo using a button in the top right.

My expectation is that subsequent clicks to "rerender" would result in an identical graph. The observed behavior is that on initial render, the graph I see shows the expected partial autorange, but a subsequent render changes autorange to true and range to the calculated autorange. I can double click the graph to return to the initial layout settings, but I'm surprised that it changes on me in the first place.

If this is working as expected, please disregard. I understand that Plotly mutates layout (and potentially data) in the computation cycle, but figured these mutations would not override the original expressed intention of a graph layout. Seeing as the partial autorange behavior is relatively new, I wondered if this might be unexpected behavior.

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

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

はじめの一歩

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

調査の方向性

リンク先のCodePenと生のPlotly.react呼び出しから始め、繰り返しのレンダリングでlayout.yaxisのautorangeとrangeがどのように処理されるかに注目します。部分的なautorange設定を変更する更新経路を追跡し、その後、繰り返し呼び出してもautorange: "min"とrange: [null, 50]が維持され、同一のグラフが生成されることを確認します。

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

評価

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

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

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