plotly / plotly/plotly.js

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

Đang mở
#7,594 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.

bug
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ả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

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.

Hướng nghiên cứu

Bắt đầu với bản tái hiện được cung cấp bằng cách sử dụng Plotly.react và Plotly.update, tập trung vào các biểu đồ cực, các điều khiển thu phóng, autorange và zoomout bằng cách nhấp đúp. Payload không nêu tên tệp hoặc kiểm thử nào trong repository; được xem là hoàn tất khi các cài đặt layout như dragmode và cấu hình radialaxis được giữ nguyên, đồng thời toàn bộ phạm vi dữ liệu được khôi phục sau zoomout.

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ó
4/5
Thời gian dự kiến
3-5 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
35/100

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.