使用选择菜单添加过滤，它不起作用

Question

我的目的是当我单击其中一个 city_name 时，图表将过滤为仅显示有关该城市的信息。

params 部分的代码是我在 Vegta-Lite 中添加的用于使用选择菜单过滤的代码。（我的方法尝试使用)

然而，如下图所示，即使我按 布里斯班 过滤，该图仍然为我提供了所有信息，而不仅仅是一张折线图。（即我的过滤器菜单不起作用。）

有线，选择菜单已经存在，但不能link到我的图表。感觉这个选择菜单是独立存在的....

有人知道我该如何解决这个问题吗？

即如何让我的选择菜单 link 到我的图表，以便我可以按 city_name 过滤？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 800, "height": 200,
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/data/rainfall_tidy.csv"},

  "params": [
    {
      "name":"City_Selection",
      "bind":{
        "input":"select",
        "options":[
          null,
          "Adelaide",
          "Brisbane",
          "Canberra",
          "Melbourne",
          "Perth",
          "Sydney"
  ],
  "labels":[
    "Show All",
    "Adelaide",
    "Brisbane",
   "Canberra",
    "Melbourne",
   "Perth",
   "Sydney"
  ],
  "name":"City_Selection:"
}
}
],

  "mark": {
    "type": "line",
    "point": {
      "filled": false,
      "fill": "white"
    }
  },
  "encoding": {
    "x": {"timeUnit": "year", "field": "date"},
    "y": {"aggregate":"mean", "field": "rainfall", "type": "quantitative"},
    "color": {"field": "city_name", "type": "nominal"}
  }
}

Answer 1

"params" 定义选择的方法目前处于试验阶段，在 Vega-Lite 的当前版本中未完全实现。

如果您想使用输入框来过滤数据，最直接的方法是按照 Input Element Binding section of the Vega-Lite documentation, and use a Filter transform 根据您创建的选择来过滤数据。

这是一个例子 (view in Vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 800,
  "height": 200,
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {
    "url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/data/rainfall_tidy.csv"
  },
  "selection": {
    "city_selector": {
      "type": "single",
      "fields": ["city_name"],
      "bind": {
        "input": "select",
        "options": [
          null,
          "Adelaide",
          "Brisbane",
          "Canberra",
          "Melbourne",
          "Perth",
          "Sydney"
        ],
        "labels": [
          "Show All",
          "Adelaide",
          "Brisbane",
          "Canberra",
          "Melbourne",
          "Perth",
          "Sydney"
        ],
        "name": "City Selection:"
      }
    }
  },
  "transform": [{"filter": {"selection": "city_selector"}}],
  "mark": {"type": "line", "point": {"filled": false, "fill": "white"}},
  "encoding": {
    "x": {"timeUnit": "year", "field": "date"},
    "y": {"aggregate": "mean", "field": "rainfall", "type": "quantitative"},
    "color": {
      "field": "city_name",
      "type": "nominal",
      "scale": {
        "domain": [
          "Adelaide",
          "Brisbane",
          "Canberra",
          "Melbourne",
          "Perth",
          "Sydney"
        ]
      }
    }
  }
}

使用选择菜单添加过滤，它不起作用

Add filtering with a selection menu, it does not work

javascript

html

vega-lite