Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Area plot not working on single point despite strokeLinecap: square

オープン
  • 何か問題がありますか？
#2,163 コメント 5 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
55/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
活発
技術スタック
d3, javascript
領域
data-visualization

調査の方向性

area mark API のドキュメントから始め、gaps と strokeLinecap: "square" を指定した Plot.areaY を使って Observable notebook の例を再現します。生成された SVG パスを調べ、レポートに示されている CSS workaround と比較します。追加のスタイリングなしで、ドキュメントに記載されたオプションにより単一点の area セグメントが目に見える形でレンダリングされれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
HTML
スター
5.4k
フォーク
250
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

observablehq/plot のほかの issue

observablehq/plot の issue をすべて見る

似ている issue

Data Visualization の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。