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

Question

我是vega-lite的新手。我真的很想让下面的嵌套条形图正常工作。此嵌套条形图描述了多个类别的聚合值。输入数据根据两个字段细分(类别成员资格参差不齐)。然后对每个子组进行聚合，以显示第三个定量字段的平均值。织女星上的例子：Nested Bar Chart Example

如何不使用row函数？

{
"$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：Nested Bar Chart上的例子转换成了vega-lite。所以我希望它能帮助你理解或解决你的问题。如果你需要帮助你的图表，那么我将需要一些适当的意见，从你的末端。请参阅下面的代码或Editor中的代码

{
  "$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"}
            }
          }
        ]
      }
    }
  ]
}