通过画笔取消选择取消过滤标记

Question

我有一个文本标记和两个垂直连接的区域标记（与我之前的问题相关）。 每个区域标记都有一个参数画笔，区域 2 画笔控制区域 1 的域。与我之前的问题不同，我使用刷过的区域来过滤数据集，而不是直接在文本标记中使用刷过的日期 - 这可以设置对过滤后的数据集进行进一步计算。 目前，我只显示过滤后的时间范围。

我遇到的问题是，当我取消选择两个画笔时，过滤器不会更新并保持对最后刷过的值进行过滤。 此处突出显示的日期应显示 2000 年至 2010 年之间，而不是之前筛选的值，因为画笔已被取消选择。

如何在取消选择两个画笔时清除此过滤器？

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

Answer 1

这有效。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "params": [
    {"name": "a", "expr": "brush1.date?true:false"},
    {"name": "b", "expr": "brush2.date?true:false"},
    
  ],
  "vconcat": [
    {
      "title": "text mark:",
      "width": 480,
      "mark": "text",
      "transform": [
         {"extent": "date", "param": "c"},
        {
          "joinaggregate": [
            {"op": "min", "field": "date", "as": "min_date"},
            {"op": "max", "field": "date", "as": "max_date"}
          ]
        },
        {
          "calculate": "a?brush1.date[0]:b?brush2.date[0]:datum.min_date",
          "as": "min_date"
        },
        {
          "calculate": "a?brush1.date[1]:b?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(a?brush1.date[0]:b?brush2.date[0]:c[0], '%d %b %Y') + ' to ' + timeFormat(a?brush1.date[1]:b?brush2.date[1]:c[1], '%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}
        }
      }
    }
  ]
}