Vega-Lite中取消双Brush选择时如何清除数据过滤器？

我有一个text mark和两个垂直拼接的area mark，每个area mark都配置了brush参数，area 2的brush控制area 1的domain。现在通过brush选区过滤数据集（而非直接在text mark中使用brush选中的日期，以便后续对过滤后的数据集进行计算），目前仅展示过滤后的时间范围。

遇到的问题：当取消选择两个brush时，过滤器不会更新，仍保留最后一次brush的过滤值。此时高亮显示的日期应显示2000到2010年（数据集的完整时间范围），而非之前的过滤值。

当前使用的Vega-Lite代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
    "title": "text mark:",
    "width": 480,
    "mark": "text",
    "transform": [
      {
        "joinaggregate": [
          {
            "op": "min",
            "field": "date",
            "as": "min_date"
          },
          {
            "op": "max",
            "field": "date",
            "as": "max_date"
          }
        ]
      },
      {
        "calculate": "brush1.date?brush1.date[0]:brush2.date?brush2.date[0]:datum.min_date",
        "as": "min_date"
      },
      {
        "calculate": "brush1.date?brush1.date[1]:brush2.date?brush2.date[1]:datum.max_date",
        "as": "max_date"
      },
      {
        "filter": "datum.date >= datum.min_date & datum.date <= datum.max_date"
      }
    ],
      "encoding": {
        "text": {
   "value":{"expr": "timeFormat(datum.min_date, '%d %b %Y') + ' to ' + timeFormat(datum.max_date, '%d %b %Y')"}
        }
      }
    },
    {
    "title": "area mark 1:",
    "width": 480,
    "mark": "area",
    "params": [{
      "name": "brush1",
      "select": {"type": "interval", "encodings": ["x"]}
    }],
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal",
        "scale": {"domain": {"param": "brush2"}},
        "axis": {"title": ""}
      },
      "y": {"field": "price", "type": "quantitative"}
    }
  }, {
    "title": "area mark 2:",
    "width": 480,
    "height": 60,
    "mark": "area",
    "params": [{
      "name": "brush2",
      "select": {"type": "interval", "encodings": ["x"]}
    }],
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal"
      },
      "y": {
        "field": "price",
        "type": "quantitative",
        "axis": {"tickCount": 3, "grid": false}
      }
    }
  }]
}

解决方案 #

问题根源在于：当brush选区被取消时，brush参数的date属性不会自动清空，仍保留最后一次选区的值。因此需要通过判断brush的empty属性来识别未选中状态，从而重置过滤范围。

修改后的代码如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "title": "text mark:",
      "width": 480,
      "mark": "text",
      "transform": [
        {
          "joinaggregate": [
            {"op": "min", "field": "date", "as": "global_min"},
            {"op": "max", "field": "date", "as": "global_max"}
          ]
        },
        {
          "calculate": "!brush1.empty ? brush1.date[0] : (!brush2.empty ? brush2.date[0] : datum.global_min)",
          "as": "min_date"
        },
        {
          "calculate": "!brush1.empty ? brush1.date[1] : (!brush2.empty ? brush2.date[1] : datum.global_max)",
          "as": "max_date"
        },
        {
          "filter": "datum.date >= datum.min_date && datum.date <= datum.max_date"
        }
      ],
      "encoding": {
        "text": {
          "value": {"expr": "timeFormat(datum.min_date, '%d %b %Y') + ' to ' + timeFormat(datum.max_date, '%d %b %Y')"}
        }
      }
    },
    {
      "title": "area mark 1:",
      "width": 480,
      "mark": "area",
      "params": [
        {"name": "brush1", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "scale": {"domain": {"param": "brush2"}},
          "axis": {"title": ""}
        },
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "title": "area mark 2:",
      "width": 480,
      "height": 60,
      "mark": "area",
      "params": [
        {"name": "brush2", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

关键修改点 #

1. 将全局最小/最大日期的字段名改为global_min和global_max，避免与后续计算的min_date/max_date混淆；
2. 在计算过滤范围时，通过!brush1.empty和!brush2.empty判断是否有有效选区：只有当brush处于非空状态时，才使用其date范围，否则回退到全局时间范围；
3. 逻辑判断采用短路求值，优先使用brush1的选区，其次是brush2，最后是全局范围。

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