Vega-Lite 中可视化的间距

Question

我知道如何控制可视化中元素的间距，我知道如何控制可视化的宽度和高度。但是，是否可以控制可视化与其他元素（例如标题或图例）之间的间距？

Answer 1

要自定义标题，您可以使用 object 而不是字符串。您可以在 https://vega.github.io/vega-lite/docs/title.html 的文档中了解有关可用选项的更多信息。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A simple bar chart with embedded data.",
  "title": {
    "text": "This is an awesome Chart!",
    "offset": 20
  },
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}

如果你想让你的图表更紧凑，你也可以使用负偏移量。

您可以类似地自定义图例。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {
    "url": "data/cars.json"
  },
  "mark": "point",
  "encoding": {
    "x": {
      "field": "Horsepower",
      "type": "quantitative"
    },
    "y": {
      "field": "Miles_per_Gallon",
      "type": "quantitative"
    },
    "color": {
      "field": "Origin",
      "type": "nominal",
      "legend": {
        "labelOffset": 30,
        "titleAnchor": "end",
        "offset": 30
      }
    }
  }
}

Vega-Lite 中可视化的间距

spacing around visualizations in Vega-Lite

vega-lite