如何解决Vega-Lite地图图表中search_input信号未识别的问题

错误原因 #

• 参数引用方式错误：在Vega-Lite的表达式中，不能直接使用参数名，必须通过param('参数名')函数来获取参数值，直接写search_input会被识别为未定义的信号。
• 参数作用域问题：org参数定义在第三个图层内部，第二个图层的filter无法访问这个局部参数，需要将共享参数移至顶层，让所有图层都能调用。

修正后的代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "An interactive visualization of connections among major U.S. airports in 2008. Based on a U.S. airports example by Mike Bostock.",
  "params": [
    {
      "name": "org",
      "select": {
        "type": "point",
        "on": "pointerover",
        "nearest": true,
        "fields": ["origin"]
      }
    },
    {
      "name": "search_input",
      "bind": {
        "input": "search", 
        "placeholder": "Search Airport", 
        "name": "Search"
      },
      "value": ""
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "geoshape",
        "fill": "#ddd",
        "stroke": "#fff",
        "strokeWidth": 1
      },
      "data": {
        "url": "data/us-10m.json",
        "format": {"type": "topojson", "feature": "states"}
      }
    },
    {
      "mark": {"type": "rule", "color": "#000", "opacity": 0.35},
      "data": {"url": "data/flights-airport.csv"},
      "transform": [
        {"filter": {"param": "org", "empty": false}},
        {
          "lookup": "origin",
          "from": {
            "data": {"url": "data/airports.csv"},
            "key": "iata",
            "fields": ["latitude", "longitude"]
          }
        },
        {
          "lookup": "destination",
          "from": {
            "data": {"url": "data/airports.csv"},
            "key": "iata",
            "fields": ["latitude", "longitude"]
          },
          "as": ["lat2", "lon2"]
        }
      ],
      "encoding": {
        "latitude": {"field": "latitude"},
        "longitude": {"field": "longitude"},
        "latitude2": {"field": "lat2"},
        "longitude2": {"field": "lon2"}
      }
    },
    {
      "mark": {"type": "circle"},
      "data": {"url": "data/flights-airport.csv"},
      "transform": [
        {"aggregate": [{"op": "count", "as": "routes"}], "groupby": ["origin"]},
        {
          "lookup": "origin",
          "from": {
            "data": {"url": "data/airports.csv"},
            "key": "iata",
            "fields": ["state", "latitude", "longitude"]
          }
        },
        {"filter": "datum.state !== 'PR' && datum.state !== 'VI'"}
      ],
      "encoding": {
        "latitude": {"field": "latitude"},
        "longitude": {"field": "longitude"},
        "size": {
          "field": "routes",
          "type": "quantitative",
          "scale": {"rangeMax": 1000},
          "legend": null
        },
        "order": {
          "field": "routes",
          "sort": "descending"
        },
        "opacity": { 
           "condition": {
              "test": "test(regexp(param('search_input'),'i'),datum.origin)",
              "value": 0.8
           },
           "value": 0.1
        }
      }
    }
  ],
  "projection": {"type": "albersUsa"},
  "width": 900,
  "height": 500
}

关键修改点 #

1. 将org和search_input参数移至顶层params数组中，确保所有图层都能访问这些参数。
2. 在opacity的条件测试表达式中，将search_input改为param('search_input')，正确获取搜索框的输入值。

内容的提问来源于stack exchange，提问作者Christopher