将画笔捕捉到日期进行过滤

Question

我有一个文本标记和两个垂直连接的区域标记（与我之前的问题相关）。每个区域标记都有一个参数画笔，区域 2 画笔控制区域 1 的域。我使用画刷区域来过滤文本标记，问题是由于 x 轴是时间轴，画笔似乎会产生间隔以毫秒为单位，而我想以天为单位。 我已将 timeUnit 更改为

yearmonthdate

但现在过滤根本不起作用。

如何才能像以前一样将刷子间隔捕捉到各个日期并进行过滤？

我修改了之前的代码，更改了timeUnit，并且还对单个年份进行了过滤，以便更容易刷个别日期。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "transform": [
    {
      "filter": {"timeUnit": "year", "field": "date", "lte": "2000"}
    }
  ],
  "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",
          "timeUnit": "yearmonthdate",
          "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", "timeUnit": "yearmonthdate"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

Answer 1

将您的引用更改为yearmonthdate_date

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "transform": [
    {"filter": {"timeUnit": "year", "field": "date", "lte": "2000"}}
  ],
  "params": [
    {"name": "a", "expr": "brush1.yearmonthdate_date?true:false"},
    {"name": "b", "expr": "brush2.yearmonthdate_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.yearmonthdate_date[0]:b?brush2.yearmonthdate_date[0]:datum.min_date",
          "as": "min_date"
        },
        {
          "calculate": "a?brush1.yearmonthdate_date[1]:b?brush2.yearmonthdate_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.yearmonthdate_date[0]:b?brush2.yearmonthdate_date[0]:c[0], '%d %b %Y') + ' to ' + timeFormat(a?brush1.yearmonthdate_date[1]:b?brush2.yearmonthdate_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",
          "timeUnit": "yearmonthdate",
          "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", "timeUnit": "yearmonthdate"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}