动态过滤折线图（上下文：隐藏指数图表上的历史数据）

Question

我正在使用 Vega-Lite 指数图表制作一些原型 https://vega.github.io/vega-lite/examples/interactive_index_chart.html

互动指数图表

我喜欢这样一个事实：我可以将图表重新索引到任何给定日期，并查看线系列之间的相对变化。

但是，我发现索引点左侧的线条会分散用户的注意力/使用户感到困惑。 有没有办法过滤掉索引点左侧的所有折线图？

我已经重新编码了点击时的重新索引，而不是鼠标悬停......如果能过滤掉我点击日期之前的任何内容，那就太好了。 我是 VEGA 的新手，所以说实话，我不知道如何在点击时进行过滤。

Answer 1

在第二层中添加此变换过滤器：

{
"filter": "datum.index && datum.index.date <= datum.date"
},

也许可以考虑向左侧线条添加不透明度。那么他们很虚弱吗？只是一个想法。

Answer 2

你的意思是这样吗？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/stocks.csv",
    "format": {"parse": {"date": "date"}}
  },
  "width": 650,
  "height": 300,
  "layer": [
    {
      "params": [{
        "name": "index",
        "value": [{"x": {"year": 2005, "month": 1, "date": 1}}],
        "select": {
          "type": "point",
          "encodings": ["x"],
          "on": "pointerover",
          "nearest": true
        }
      }],
      "mark": "point",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "opacity": {"value": 0}
      }
    },
    {
      "transform": [
        {
          "lookup": "symbol",
          "from": {"param": "index", "key": "symbol"}
        },
        {
          "calculate": "datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0",
          "as": "indexed_price"
        },
        {"filter":"datum.date>index.date"}
      ],
      "mark": "line", 
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "y": {
          "field": "indexed_price", "type": "quantitative",
          "axis": {"format": "%"}
        },
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "transform": [{"filter": {"param": "index"}}],
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "color": {"value": "firebrick"}
      },
      "layer": [
        {"mark": {"type": "rule", "strokeWidth": 0.5}},
        {
          "mark": {"type": "text", "align": "center", "fontWeight": 100},
          "encoding": {
            "text": {"field": "date", "timeUnit": "yearmonth"},
            "y": {"value": 310}
          }
        }
      ]
    }
  ]
}