如何修复 hconcat 金字塔图表中呈现的文本？

Question

我正在尝试创建一个连续金字塔图，但中间的文本似乎无法正确呈现。将标记文本的字段更改为数字不会出现此渲染问题。这是我遵循并修改的示例。人口金字塔

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "spacing": 0,
  "hconcat": [
    {
      "transform": [
        { "filter": { "field": "sentiment", "equal": "negative" } }
      ],
      "encoding": {
        "y": { "field": "type", "title": null, "axis": null },
        "x": {
          "field": "sentiment",
          "aggregate": "count",
          "axis": null,
          "sort": "descending"
        }
      },
      "layer": [
        { "mark": "bar", "encoding": { "color": { "field": "channel" } } }
      ]
    },
    {
      "width": 100,
      "view": { "stroke": null },
      "mark": { "type": "text", "align": "center" },
      "encoding": {
        "y": { "field": "type", "axis": null },
        "text": { "field": "type" }
      }
    },
    {
      "mark": "bar",
      "transform": [
        { "filter": { "field": "sentiment", "equal": "positive" } }
      ],
      "encoding": {
        "color": { "field": "channel" },
        "y": { "field": "type", "axis": null },
        "x": { "field": "sentiment", "aggregate": "count", "axis": null }
      }
    }
  ],
  "config": { "view": { "stroke": null }, "axis": { "grid": false } },
  "data": {
    "values": [
      {
        "id": 1,
        "type": "shops",
        "channel": "line man",
        "sentiment": "negative"
      }
    ]
  }
}

Answer 1

由于您没有在文本图表中进行任何聚合，因此每个文本标记都绘制了多次——数据中每个对应行绘制一次。这种多个文本标记的堆叠使它看起来好像渲染不佳。

为确保每个文本标记仅绘制一次，您需要聚合数据。有几种方法可以做到这一点，但最简单的方法是使用关联数值列的 argmin 或 argmax：

"encoding": {
  "y": {"field": "type", "axis": null},
  "text": {"field": "type", "aggregate": {"argmin": "id"}}
}

如何修复 hconcat 金字塔图表中呈现的文本？

How do you fix the rendered text in a hconcat pyramid chart?

vega-lite

vega