Vega-Lite 如何获得嵌套条形图？

Question

我对 vega-lite 还很陌生。 我真的很想让下面的嵌套条形图工作。 此嵌套条形图描绘了跨多个类别的聚合值。 输入数据根据两个字段进行细分（类别成员资格不均匀）。 然后聚合每个子组以显示第三个定量字段的平均值。 vega 示例：嵌套条形图示例

怎么不使用行function？

{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": [
        {"a0": 0,"a": 0, "b": "a", "c": 6.3},
        {"a0": 0,"a": 0, "b": "a", "c": 4.2},
        {"a0": 0,"a": 0, "b": "b", "c": 6.8},
        {"a0": 0,"a": 0, "b": "c", "c": 5.1},
        {"a0": 0,"a": 1, "b": "b", "c": 4.4},
        {"a0": 0,"a": 2, "b": "b", "c": 3.5},
        {"a0": 0,"a": 2, "b": "c", "c": 6.2}
        ]
    },
    "transform": [
        {"window": [{"op": "count",  "as": "room2"}]}
    ],

"vconcat": [
    {
    "facet": {"column": {"field": "a0"},"row": {"field": "a"}},
    "spec": {
            "width": 100,
        "encoding": {
        "y": {"field": "room2", "type": "nominal","axis": null},
        "x": {"value": 100, "type": "quantitative"}
        },
        
        "layer": [
        {
            "mark": {"type": "bar", "cornerRadius": 10},
            "encoding": {
            "color": {
                "field": "room2"
            }
            }
        }
        ]
    }
}
]
}

Answer 1

我已将 vega 上的示例：嵌套条形图示例转换为 vega-lite。 所以我希望它能帮助你理解或解决你的问题。 如果您需要有关图表的帮助，那么我需要您提供一些适当的输入。 请参阅下面或编辑器中的代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"a": 0, "b": "a", "c": 6.3},
      {"a": 0, "b": "a", "c": 4.2},
      {"a": 0, "b": "b", "c": 6.8},
      {"a": 0, "b": "c", "c": 5.1},
      {"a": 1, "b": "b", "c": 4.4},
      {"a": 2, "b": "b", "c": 3.5},
      {"a": 2, "b": "c", "c": 6.2}
    ]
  },
  "transform": [
    {
      "aggregate": [{"field": "c", "as": "avg_c", "op": "average"}],
      "groupby": ["a", "b"]
    }
  ],
  "vconcat": [
    {
      "facet": {"row": {"field": "a", "title": null, "header": null}},
      "spec": {
        "width": 300,
        "encoding": {
          "y": {"field": "b", "type": "nominal", "axis": null},
          "x": {"field": "avg_c", "type": "quantitative"}
        },
        "layer": [
          {
            "mark": {"type": "bar", "cornerRadius": 10},
            "encoding": {"color": {"field": "a"}}
          },
          {
            "mark": {"type": "text", "align": "right", "dx": -5},
            "encoding": {
              "text": {"field": "b"},
              "x": {"datum": "0", "type": "quantitative"}
            }
          }
        ]
      }
    }
  ]
}