plotly / plotly/plotly.js

“Error parsing” in empty axis

Đang mở
#6,298 2 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 P3
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ả

I have a probably not common issue, but also probably easy to fix. I have also posted it in the community, and I reproduce it here.

I have a plot (that I create with Python but I edit later on the html/js) that looks like this:
6707dfe749f7dff3cada935f8145053ab34b425a

When I open the html, there are errors on the console:

Error: Problem parsing d="MNaN,NaNHNaNMNaN,NaNHNaN"
Error: Problem parsing d="MNaN,NaNHNaNMNaN,NaNHNaN"

Although the graphs look fine, these errors are annoying (as there are many graphs like this on the page, and therefore many errors).
(I have tested many versions 2.XX and it always happen, including 2.14.0).
Also, what seems to be causing this is related to the black line of xaxis2 and yaxis2 (which is the top-right graph). This is how the layout looks like for this part:

xaxis2: {
  anchor: "y2",
  domain: [0.806, 1.0],
  mirror: true,
  ticks: "",
  linecolor: "black",
  showgrid: false,
  range: [0.0, 1.0],
  fixedrange: true,
  showticklabels: false,
},
yaxis2: {
  anchor: "x2",
  domain: [0.73, 1.0],
  mirror: true,
  ticks: "",
  linecolor: "black",
  showgrid: false,
  range: [0.0, 1.0],
  fixedrange: true,
  showticklabels: false,
},

If I comment out the linecolor: "black", the errors disappear.

I have created a (somewhat) minimal example here: https://codepen.io/filipesmg/pen/ZExmorL
However, the error is not showing directly in codepen (maybe because the error is inside plotly.js?) If that code is put inside <html>(...)</html>, it shows up. The linecolor lines are 640 and 652.

Investigating the plotly.min.js file while running the code, I noticed that the error comes from this part:

(Y.attr = function (e, r) {
if (arguments.length < 2) {
(...)
}
return this.each(K(e, r));
}),

which calls the function K(e,r) that has:

function(){this.setAttribute(e,r)}}

The problem is that in my example, at some point there seems to be no argument to the function (e,r), and r is undefined. There are many times where arguments.length = 1 or 2, but there are 2 times where it is undefined. In these cases, it doesn't enter the if (arguments.length < 2) and it goes to return this.each(K(e, r)); where it gives an error in the .setAttribute(e,r). Maybe a simple if ( ! r) { return; } would solve the issue, but I can't follow more the code to know if it'd affect other things.

I'm using 12.3.1, and I this error shows up in Safari 15.4 and in Chrome 104.0.5112.79, but not on Firefox 103.0.2.

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 ví dụ CodePen tối thiểu và HTML được tạo ra, tập trung vào các thiết lập linecolor của xaxis2/yaxis2 ở dòng 640 và 652. Theo dõi đường đi của plotly.min.js qua đoạn mã attr/setAttribute được hiển thị và so sánh hai trường hợp đối số undefined; hoàn tất khi biểu đồ được tái hiện hiển thị mà không có lỗi phân tích cú pháp trong console và vẫn giữ các đường trục.

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.