如何在vega-lite中管理图层和列

Question

我从this trellis chart开始，其中我有3列。

​

​

我必须添加一个规则，然后我需要使用一个层。我已经编辑了我的配置，现在我have this one：我失去了列，我把所有的东西都放在一行上。

如何不丢失列中的排列？

​

​

Answer 1

将整个facet和layer包装在一个vconcat中，并在外部提供一个columns: 3。请参阅以下代码或editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "name": "trellis_barley",
  "description": "Trellis",
  "title": {
    "text": "Ingressi giornalieri in Terapia Intensiva (TI) a confronto con ricoveri totali in TI",
    "color": "#168CC7",
    "fontSize": 18,
    "anchor": "start",
    "font": "Montserrat",
    "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis enim ac fringilla feugiat",
    "subtitleFont": "Montserrat"
  },
  "data": {
    "url": "https://raw.githubusercontent.com/ondata/covid19italia/master/elaborazioni/dpc_covid19/terapiaIntensiva/processing/terapiaIntensivaRegSoglia.csv"
  },
  "vconcat": [
    {
      "columns": 3,
      "facet": {
        "field": "denominazione_regione",
        "type": "ordinal",
        "title": ""
      },
      "spec": {
        "layer": [
          {
            "mark": "point",
            "encoding": {
              "x": {
                "field": "ingressi_terapia_intensiva_mm",
                "type": "quantitative",
                "title": "Ingressi giornalieri in TI",
                "scale": {"zero": false, "padding": 10}
              },
              "y": {
                "field": "terapia_intensiva_mm",
                "type": "quantitative",
                "title": "Totale ricoveri in TI",
                "scale": {"zero": false, "padding": 10}
              },
              "tooltip": [
                {"field": "mese", "type": "nominal", "title": "mese"}
              ],
              "color": {
                "field": "mese",
                "type": "nominal",
                "legend": {"title": "Mesi"},
                "scale": {"scheme": "tableau10"}
              }
            }
          },
          {
            "mark": {"type": "rule", "color": "red"},
            "encoding": {
              "y": {"field": "soglia30", "type": "quantitative", "title": null},
              "size": {"value": 1}
            }
          }
        ]
      },
      "resolve": {"scale": {"x": "independent", "y": "independent"}}
    }
  ]
}