Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Area plot not working on single point despite strokeLinecap: square

Abierto
  • ¿Algo no está bien?
#2,163 5 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
55/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
d3, javascript
Área
data-visualization

Línea de trabajo

Empieza por la documentación de la API de area mark y reproduce el ejemplo del cuaderno de Observable usando Plot.areaY con gaps y strokeLinecap: "square". Inspecciona la ruta SVG generada y compárala con la solución alternativa de CSS mostrada en el informe. Se considera terminado cuando un segmento de área de un solo punto se renderiza visiblemente con la opción documentada, sin estilos adicionales.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
HTML
Estrellas
5.4k
Forks
246
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de observablehq/plot

Todos los issues de observablehq/plot

Issues similares

Más issues de Data Visualization

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.