Vega-Lite：实现brush缩放时x轴标签区域标记可见

问题核心是：当为点标记的x轴绑定brush缩放参数后，点的y坐标（210）超出了上层视图默认的y轴数据范围，被自动裁剪隐藏了。上层视图的y轴范围由区域图的price数据决定，210不在这个范围内，所以即使坐标设置在x轴下方，也会被视图的裁剪机制过滤掉。

修复方案 #

给点标记的mark配置添加"clip": false，关闭该标记的裁剪规则，让超出视图数据范围的点能正常显示；也可以给整个上层视图设置关闭裁剪，二者选其一即可。

修改后的代码如下（标注了关键修改处）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "width": 480,
      "height": 200,
      // 可选：给整个视图关闭裁剪，所有元素都不会被裁剪
      // "config": {"view": {"clip": false}},
      "layer": [
        {
          "mark": "area",
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}},
              "axis": {"title": "", "labelPadding": 20}
            },
            "y": {"field": "price", "type": "quantitative"}
          }
        },
        {
          // 关键修改：给点标记添加clip: false，允许点超出数据范围显示
          "mark": {"type": "point", "clip": false},
          "encoding": {
            "x": {
              "field": "date",
              "type": "temporal",
              "scale": {"domain": {"param": "brush"}},
              "axis": {"title": ""}
            },
            "y": {"value": 210},
            "color": {"value": "black"}
          }
        }
      ]
    },
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "params": [
        {"name": "brush", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

修改后，点标记会稳定显示在x轴下方，同时跟随概览图的brush缩放同步更新位置，不会再出现消失的情况。

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