Margins not updating correctly in pie chart after manual resizing

Đang mở
  • Có gì không ổn?
#354 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, react
Lĩnh vực
data-visualization, frontend

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện vấn đề trong một ứng dụng React với plotly.js 3.0.x và react-plotly.js 2.6.0, sử dụng biểu đồ tròn với các phần [39,61]. Theo dõi quá trình cập nhật layout sau khi thay đổi chiều rộng từ 40 thành 400 và so sánh với trường hợp [10,90]. Hoàn thành có nghĩa là việc thay đổi kích thước và cập nhật margin sẽ tính toán lại không gian khả dụng cho biểu đồ tròn mà không yêu cầu thay đổi font-size.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

When dynamically updating a pie chart, I encountered an issue where the available space for the pie chart does not update properly after changing the plot size.

For my setup, the plot is rendered using Plotly in a React app. The plot state is managed using useState() and the layout updates are triggered via useEffect() whenever a user changes the settings object (for plot width, height, font, etc). The update is performed like this:

setPlot((prevPlot) => ({
  ...prevPlot,
  layout: {
    ...prevPlot.layout,
    width: displaySizes.width,
    height: displaySizes.height,
    margin: {
      ...prevPlot.layout.margin,
      t: settings.marginTop,
      b: settings.marginBottom,
      l: settings.marginLeft,
      r: settings.marginRight,
    },
    // other layout updates
  },
}));

Used versions are "plotly.js": "^3.0.0", "plotly.js-dist-min": "^3.0.1", "react-plotly.js": "^2.6.0".

Steps to reproduce the described bug:

  1. Render a pie chart with segments [39,61]
  2. Set the plot size to an incorrect size, e.g. width: 40, height: 255
  3. Correct the plot size to valid values, e.g. width: 400, height: 255

Plot, before resizing:
Image

Plot, after resizing as described:
Image

The visible margins are now way larger than what is defined in the layout and much larger than necessary, since the pie chart could take up more space (like before). Changing the margins or plot size has no effect on the margins; only randomly increasing or decreasing the text size causes the plot to reset and render correctly.
It seems like the issue is related to the segment ratio: It only occurs when the pie segments are similar (e.g. [39, 61]), but not when they differ a lot (e.g. [10, 90]).

None of the approaches I came across online (such as Plotly.Plots.resize() or using the revision prop) solved this problem.

Ngôn ngữ chính
JavaScript
Star
1.1k
Fork
138
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của plotly/react-plotly.js

Tất cả issue của plotly/react-plotly.js

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.