如何在“ Vega Lite”的嵌套图表中共享标签？

Question

我想使用“ Vega Lite”来达到类似于Tableau的嵌套效果。尽管也可以实现“ Vega Lite”，但显示效果并不令人满意，这主要反映在每个子图中都有自己的坐标轴标签，并且信息密度不高。 Tableau更紧凑。

这是Tableau的一个例子：

这是Vega-Lite的一个示例：

{
  "data": {"url": "https://uniplore-source.oss-cn-chengdu.aliyuncs.com/other/orders2.csv"},
  "spacing": 0,
  "facet": {"row": {"field": "快递方式","type": "nominal",
   "header":{"labelExpr": "null"}
  }},

  "spec": {
    "facet": {"column": {"field": "类别","type": "nominal","header":{"labelExpr": "null"}}},
    "spacing": 0,
    "spec": {
      "spacing": 0,
      "facet": {
        "column": {
          "field": "子类别","type": "nominal"
        }
      },
      "spec": {
        "facet": {
          "column": {
            "field": "细分","type": "nominal"
          }
        },
        "spec": {
          "mark": "bar",
          "spacing": 0,
          "encoding": {
            "x": {
              "field": "细分","type": "nominal"
            },
            "y": {"aggregate": "sum","field":"销售额"}
          }
        }
      }
    }
  }
}

You can view my example here.

实际上，用Vega Lite在一个屏幕上不能显示相同数量的信息。

我尝试了一些配置，但是效果并不明显。

我想知道Vega Lite是否可以实现Tableau的显示效果。 其中最重要的是共享标签。

谢谢。

Answer 1

如果您的意思是共享轴，则可以使用Facet进行此操作。

https://vega.github.io/vega.io/vega-lite/docs/docs/facet。 html

Edit 1

” =“ https://i.sstatic.net/gxwzh.png” alt =“在此处输入图像说明”>

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "name": "trellis_barley",
  "description": "The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison.",
  "data": {"url": "data/barley.json"},
  "mark": "point",
  "height": {"step": 12},
  "encoding": {
    "facet": {
      "spacing": {"row": -40},
      "field": "site",
      "type": "ordinal",
      "columns": 2,
      "sort": {"op": "median", "field": "yield"},
      "header":{"labelExpr": "null"}
    },
    "x": {
      "aggregate": "median",
      "field": "yield",
      "type": "quantitative",
      "scale": {"zero": false}
    },
    "y": {"field": "variety", "type": "ordinal", "sort": "-x"},
    "color": {"field": "year", "type": "nominal"}
  }
}