Plotly.react resets context and breaks autosize
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- JavaScript
- Star
- 18.3k
- Fork
- 2k
- Merge trung bình
- 2 ngày 12 giờ
- Pull request đã merge (30 ngày)
- 28
Mô tả
When calling Plotly.react to update the chart it decides to completely reset the context if the config parameter is present (https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_api.js#L2698-L2706).
This breaks the autosize feature since the _hasZeroHeight state was moved to the context (in https://github.com/plotly/plotly.js/pull/3090/files#diff-2941ab69a12080c0633ff4ac8ea3aa83R493-R494).
The context._hasZeroHeight is always reset to undefined, but in the second render the gd.clientHeight is no longer zero. So the height of the svg-container div will set to 100%, causing all the plot container to have no height.
Then in the third render gd.clientHeight will be zero again, so the svg-container div gets its height properly defined.
And so on...
An workaround is to call Plotly.react without the config (if nothing in it changed), but when using react-plotly.js that isn't an option, as it always call Plotly.react using the full signature (https://github.com/plotly/react-plotly.js/blob/master/src/factory.js#L80-L85).
See https://codepen.io/nantunes/pen/abvXgbd to reproduce. Click the "Change data" button to toggle the data and call Plotly.react. Notice that the red container div shrinks (or expands) its height.
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu tại src/plot_api/plot_api.js, khoảng các dòng 2698–2706, và tái hiện hành vi bằng CodePen được liên kết bằng cách nhấp vào “Change data.”. Theo dõi cách Plotly.react đặt lại context khi config hiện diện; hoàn tất khi autosize không còn dao động hoặc để plot container không có chiều cao, bao gồm cả lệnh gọi với đầy đủ signature được react-plotly.js sử dụng.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript
- Lĩnh vực
- data-visualization
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100