添加额外的勾号以在数据点和边界之间留出一些空间]

问题描述

见附件截图

希望允许数据点和图表边框之间存在一些偏移。特别适用于用户交互，例如允许用户从右侧开始刷。

我认为回退计划是手动计算比例域（最小、最大 + 一些填充），但我试图查看是否已经有可用的预构建选项。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json","description": "A scatterplot showing horsepower and miles per gallons for varIoUs cars.","data": {
    "values": [
      {"Horsepower": 10,"Miles_per_gallon": 100},{"Horsepower": 10,"Miles_per_gallon": 120},{"Horsepower": 8,"Miles_per_gallon": 77},{"Horsepower": 6,"Miles_per_gallon": 80},{"Horsepower": 4,"Miles_per_gallon": 20},{"Horsepower": 2,"Miles_per_gallon": 60},{"Horsepower": 0,"Miles_per_gallon": 150}
    ]
  },"mark": "point","encoding": {
    "x": {"field": "Horsepower","type": "quantitative"},"y": {"field": "Miles_per_gallon","type": "quantitative"}
  }
}

解决方法

我不知道将填充添加到自动确定的比例域的内置配置，但这里有一个技巧，可让您通过在超过最大值的指定位置绘制透明点来实现此目的：

{
  "data": {
    "values": [
      {"Horsepower": 10,"Miles_per_Gallon": 100},{"Horsepower": 10,"Miles_per_Gallon": 120},{"Horsepower": 8,"Miles_per_Gallon": 77},{"Horsepower": 6,"Miles_per_Gallon": 80},{"Horsepower": 4,"Miles_per_Gallon": 20},{"Horsepower": 2,"Miles_per_Gallon": 60},{"Horsepower": 0,"Miles_per_Gallon": 150}
    ]
  },"layer": [
    {
      "mark": {"type": "point","opacity": 0},"transform": [
        {
          "aggregate": [
            {"field": "Horsepower","op": "max","as": "max_Horsepower"}
          ]
        },{"calculate": "datum.max_Horsepower + 2","as": "max_Horsepower"}
      ],"encoding": {"x": {"field": "max_Horsepower","type": "quantitative"}}
    },{
      "mark": "point","encoding": {
        "x": {"field": "Horsepower","type": "quantitative"},"y": {"field": "Miles_per_Gallon","type": "quantitative"}
      }
    }
  ]
}