将 Axis padding/inner 边距添加到 Vega-Lite 图表

Question

我创建了一个 vega-lite 散点图。此图表的数据始终为正，但通常为零。在此应用程序中，如果 x 或 y 为零的点不与轴

的线重叠，这将对用户有所帮助

直接的解决办法是尝试手动调整域和范围，从 0 之前和最大值之后开始。但是，我想知道是否有办法在配置中执行此操作。我已经通读了文档，据我所知和能力，我还没有找到这样的解决方案。

Answer 1

如果要保证最低点不与轴重叠，一种方法是使用轴"offset" 属性，它允许您指定水平偏移量以像素为单位的 y 轴。例如 (open in editor):

{
  "data": {
    "values": [
      {"x": 0, "y": 2},
      {"x": 1, "y": 4},
      {"x": 2, "y": 3},
      {"x": 3, "y": 5},
      {"x": 4, "y": 4}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative", "axis": {"offset": 20}}
  }
}

Answer 2

除了调整域和添加轴偏移外，您还可以use the scale config properties to add padding针对某种类型的所有尺度。这将在轴线和最近数据点的位置之间添加一些空白：

{
  "config": {
    "scale": {"continuousPadding": 5}
  },
  "data": {
    "values": [
      {"x": 0, "y": 2},
      {"x": 1, "y": 4},
      {"x": 2, "y": 3},
      {"x": 3, "y": 5},
      {"x": 4, "y": 4}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

将 Axis padding/inner 边距添加到 Vega-Lite 图表

Adding Axis padding/inner margin to Vega-Lite chart

vega-lite