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

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"

        ]

      }

    }

  }

}