[BUG]: When using scattergl and zooming in significantly, the lines and dots fail to align

Đang mở
#7,955 4 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ó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
55/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript
Lĩnh vực
data-visualization

Hướng nghiên cứu

Bắt đầu với bản tái hiện JavaScript được cung cấp bằng cách sử dụng Plotly.react và trace scattergl ở chế độ lines+markers; liên tục phóng to để quan sát thời điểm các đường và điểm bị lệch nhau. Theo dõi quá trình kết xuất scattergl và hành vi thu phóng cho đến khi cách xử lý tọa độ trở nên rõ ràng, sau đó xác minh rằng các đường và marker vẫn thẳng hàng ở các mức thu phóng cực lớn.

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

Mô tả

bug P3 size: 1
Description

When using scattergl, I found that if I zoom in too much, the lines and dots do not align properly.

Screenshots/Video

Video

Steps to reproduce

Click the "zoom" function in the toolbox and continuously zoom in on the points until the points and lines are misaligned.

JavaScript

<html>
  <head>
    <!-- Plotly.js -->
    <meta charset="UTF-8" />
    <script
      src="https://cdn.plot.ly/plotly-3.3.0.min.js"
      charset="utf-8"
    ></script>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #graphDiv {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="graphDiv"></div>
    <script>
      const rand = () => Math.random()
      var x = [1, 5, 10]
      var data = [
        {
          type: 'scattergl',
          mode: 'lines+markers',
          line: { color: '#b55400' },
          y: [0.000014, 0.000015, 0.000012],
          hoverinfo: 'skip',
        },
        {
          type: 'scattergl',
          mode: 'lines+markers',
        },
      ]

      var layout = {
        dragmode: 'pan',
        title: { text: '' },
        uirevision: 'true',
        xaxis: { zeroline: false, tickformat: ',d' },
        yaxis: { zeroline: false, tickformat: '.6f', automargin: true },
        responsive: true,
      }

      const graphDiv = document.getElementById('graphDiv')

      Plotly.react(graphDiv, data, layout, {
        displayModeBar: true,
        responsive: true,
      })
    </script>
  </body>
</html>
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

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.

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

Tất cả issue của plotly/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.