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

Question

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

params部分的代码是我为使用Vegta-Lite 中的选择菜单进行过滤而添加的代码。（我正在尝试使用的方法）

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

它是有线的，选择菜单已经存在，但它无法链接到我的图表。感觉这个选择菜单是独立存在的....

任何人都知道我该如何解决这个问题？

即如何让我的选择菜单链接到我的图表，以便我可以按 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:"

}

}

],

Answer 1

定义选择的方法"params"目前是实验性的，并没有在当前版本的 Vega-Lite 中完全实现。如果您想使用输入框来过滤数据，最直接的方法是遵循Vega-Lite 文档的输入元素绑定部分，并使用过滤器转换根据您创建的选择来过滤数据。这是一个示例（在 Vega 编辑器中查看）：{  "$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"        ]      }    }  }}