通过画笔参数有条件地过滤标记

Question

我有一个文本标记和两个垂直连接的区域标记（基于示例此处）。 每个区域标记都有一个参数画笔，区域 2 画笔控制区域 1 的域。

通过文本标记，我想显示以这种方式过滤的日期范围：

  if area 1 is brushed use it as the only filter
    else if area 2 is brushed use it as the only filter
     else show full date range with no filter

现在它显示整个日期范围（以毫秒为单位）。

由于它是文本标记，因此使用

"scale": {"domain": {"param": "brush2"}},

的方法与区域标记 1 不同。我猜想以某种方式设置过滤器？

这是没有文本标记过滤器的代码：

{
  "$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": "datum.min_date + ' to ' + datum.max_date",
        "as": "date_range"
      }
    ],
    "encoding": {
      "text": {
        "field": "date_range",
        "type": "nominal"
        }
    }
    },
    {
    "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"},
  "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": "datum.min_date + ' to ' + datum.max_date",
          "as": "date_range"
        }
      ],
      "encoding": {
        "text": {
   "value":{"expr": "brush1.date?brush1.date[0] + ' to ' + brush1.date[0]:brush2.date?brush2.date[0] + ' to ' + brush2.date[0]:datum.date_range"}
        }
      }
    },
    {
      "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}
        }
      }
    }
  ]
}