Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Area plot not working on single point despite strokeLinecap: square

Đang mở
  • Có gì không ổn?
#2,163 5 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ệ
d3, javascript
Lĩnh vực
data-visualization

Hướng nghiên cứu

Bắt đầu với tài liệu API của area mark và tái tạo ví dụ trong Observable notebook bằng Plot.areaY với gaps và strokeLinecap: "square". Kiểm tra đường dẫn SVG được tạo ra và so sánh với CSS workaround được trình bày trong báo cáo. Được xem là hoàn tất khi một đoạn area chỉ có một điểm được render rõ ràng bằng tùy chọn được tài liệu hóa, không có styling bổ sung.

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

Mô tả

documentation
Describing the bug

As the title implies either I didn't understand the docs for this use case or there is a bug:

Excerpt from the API docs on area marks:

The area mark supports curve options to control interpolation between points. If any of the x1, y1, x2, or y2 values are invalid (undefined, null, or NaN), the baseline and topline will be interrupted, resulting in a break that divides the area shape into multiple segments. (See d3-shape’s area.defined for more.) If an area segment consists of only a single point, it may appear invisible unless rendered with rounded or square line caps. In addition, some curves such as cardinal-open only render a visible segment if it contains multiple points.

Expected behavior

If my plot contains gaps which creates single points, I don't need to do anything else but define the mark option strokeLinecap: 'square' so that I still see an area rendered at this data point.

Steps how to reproduce

Here is my minimal working example in an Observable notebook

data = [
    {
        "time": 2009,
        "value": 74.08,
        "lowerBounds": 73.25,
        "upperBounds": 74.89,
        "age": "A0000",
        "sex": 0
    }, {
        "time": 2010,
        "value": 75.17,
        "lowerBounds": 74.37,
        "upperBounds": 75.96,
        "age": "A0000",
        "sex": 0
    }, {
        "time": 2011,
        "value": null
    }, {
        "time": 2012,
        "value": 75.95,
        "lowerBounds": 75.06,
        "upperBounds": 76.82,
        "age": "A0000",
        "sex": 0
    }, {
        "time": 2016,
        "value": null
    }, {
        "time": 2022,
        "value": 66.4,
        "lowerBounds": 63.23,
        "upperBounds": 69.44,
        "age": "A0000",
        "sex": 0
    }, {
        "time": 2023,
        "value": 67.98,
        "lowerBounds": 66.23,
        "upperBounds": 69.68,
        "age": "A0000",
        "sex": 0
    }
]

Plot.plot({
  x: {
    interval: 1,
    tickFormat: ''
  },
  y: {
    label: 'Proportion of people who have had a dental check-up in the last 12 months',
    tickFormat: d => `${d} %`
  },
  inset: 8,
  grid: true,
  marks: [
    Plot.areaY(data, {x: "time", y1: "lowerBounds", y2: "upperBounds", fill: "#DD1A1E", fillOpacity: 0.2, strokeLinecap: "square"}),
    Plot.lineY(data, {x: "time", y: "value", stroke: "#DD1A1E", marker: "circle"})
  ]
})

This is what it looks like at this point in time:

Screenshot_20240906_Observable_plot_area_mark_bug

Only after adding styles to the area (SVG <path> Element) do I see the area for a single point. Is this the desired method?

Screenshot_20240906_Observable_plot_area_mark_css_trick

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

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

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 observablehq/plot

Tất cả issue của observablehq/plot

Issue tương tự

Thêm issue về Data Visualization

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.