如何将可缩放日期X轴面积图的最小单位限制为天？

你需要实现两个核心需求：

• 限制框选缩放的最小单位为天，避免缩放到小时级
• 未缩放/回退时保留年、月级视图，缩放后自动切换为天级刻度

关键修改点 #

1. 限制brush最小选择单位：在brush参数中添加interval: "day"，强制框选范围对齐到天维度，无法选择小于一天的区间。
2. 动态轴刻度配置：使用axis.condition判断brush是否激活，动态切换刻度规则——无brush时使用适合年/月的自动刻度，有brush时强制天级刻度。

修改后的完整代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "transform": [
    {
      "filter": {"timeUnit": "year", "field": "date", "lte": "2000"}
    }
  ],
  "vconcat": [{
    "width": 480,
    "mark": "area",
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal",
        "scale": {"domain": {"param": "brush"}},
        "axis": {
          "title": "",
          // 有brush缩放时，使用天级刻度
          "condition": {
            "test": "param('brush')",
            "tickCount": "day"
          },
          // 无brush时，自动适配年/月级刻度（可根据需求调整tickCount规则）
          "tickCount": {"interval": "year", "step": 1}
        }
      },
      "y": {"field": "price", "type": "quantitative"}
    }
  }, {
    "width": 480,
    "height": 60,
    "mark": "area",
    "params": [{
      "name": "brush",
      "select": {
        "type": "interval",
        "encodings": ["x"],
        // 限制最小选择单位为天
        "interval": "day"
      }
    }],
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal"
      },
      "y": {
        "field": "price",
        "type": "quantitative",
        "axis": {"tickCount": 3, "grid": false}
      }
    }
  }]
}

说明 #

• brush的interval: "day"确保框选的起始和结束日期都会对齐到天，彻底禁止小时级缩放。
• 轴的condition配置会自动检测brush状态：当用户框选缩放时，轴显示天级刻度；点击空白处取消缩放后，轴自动恢复为年/月级的全局视图。
• 如果需要调整未缩放时的刻度密度，可修改tickCount的interval和step参数（比如改成{"interval": "month", "step": 6}显示半年刻度）。

内容的提问来源于stack exchange，提问作者Vlad