添加额外的勾号以允许数据点和边界之间有一些 space]

Question

见附件截图

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

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

{
  "$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"}
  }
}

Answer 1

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

{
  "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"}
      }
    }
  ]
}

添加额外的勾号以允许数据点和边界之间有一些 space]

Add additional tick to allow some space between the data points and the borders]

vega-lite

vega