plotly / plotly/plotly.js

Scroll zoom does not work properly when minimum and maximum range is enabled

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

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

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

説明

Scroll zoom does not work as expected when minimum and maximum range is enabled. Graphical side effects are constantly visible while zooming in/out.

See the provided example of the scatter plot chart:

  • Scrolling zoom (mouse wheel) is enabled (with scrollZoom property).
  • Minimum and maximum range is set (with minallowed and maxallowed properties).
  • (The grids and axes are visualised for better understanding the issue.)

https://codepen.io/zabka5/full/XJbYrZV

Use the mouse wheel to zoom out beyond allowed range.
The plotted trace is zoomed out even beyond the range. After a while, the plotting is "corrected" to the right zoom level. The effect is stronger if you zoom out faster. What is interesting, the axes and the grids are always scaled correctly. It means that plotting of the grid lines is always aware of the range limits but plotting the trace not.

The same effect can be reproduced while zooming IN relatively fast, even if the plot is "in the range". Then, the plotted trace exceeds the area defined by the X and Y axes and then i.e. the bigger than expected, but after a while, plotting is corrected. With this attached example, it is hard to observe this scenario. (Maybe bigger amount of data or slowness of the refreshing of the plot plays a role - with my custom environment, I can see it constantly).

The observed flickering is very annoying and shows a serious weakness in this function.

I have checked the different versions of the plotly library. The issue is easy to reproduce from the very first version introducing the minimum and maximum range, i.e. version v2.26.0 #6547

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

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

はじめの一歩

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

調査の方向性

提供されたCodePenの再現と、v2.26.0 (#6547)で導入された最小値/最大値範囲の実装から始めます。高速なスクロールズームイベント中に、traceのレンダリングを正しくスケーリングされた軸およびグリッドと比較します。traceがちらついたり後から修正されたりすることなく、許可された範囲内にとどまれば完了です。

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

評価

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

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

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