Vega-Lite地理地图Lookup Transform下Hover边框高亮失效求助

问题 #

在Vega-Lite世界地图中，给TopoJSON要素添加lookup转换后，鼠标悬停时国家边框变黑变粗的高亮效果失效。移除lookup转换时交互正常，推测是悬停图形与lookup数据的关联丢失。需要在保留lookup join的同时，实现正常的悬停高亮。

原配置代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"country": "United States of America", "value": 18000},
      {"country": "Canada", "value": 7500},
      {"country": "Mexico", "value": 4200},
      {"country": "Brazil", "value": 6800},
      {"country": "Argentina", "value": 3100},
      {"country": "Chile", "value": 2400}
    ]
  },
  "layer": [
    {
      "name": "CHART_0",
      "data": {
        "url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
        "format": {"type": "topojson", "feature": "countries"}
      },
      "mark": {"type": "geoshape", "fill": "#e9e6ef", "cursor": "pointer"},
      "encoding": {
        "stroke": {
          "condition": {"param": "geoHover", "empty": false, "value": "black"},
          "value": "white"
        },
        "strokeWidth": {
          "condition": {"param": "geoHover", "empty": false, "value": 2},
          "value": 0.5
        }
      }
    },
    {
      "name": "CHART_1",
      "encoding": {
        "color": {
          "field": "value",
          "type": "quantitative",
          "scale": {"scheme": "blues"}
        }
      },
      "layer": [
        {"mark": {"type": "geoshape", "tooltip": true, "cursor": "pointer"}}
      ],
      "transform": [
        {
          "lookup": "country",
          "from": {
            "data": {
              "url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
              "format": {"type": "topojson", "feature": "countries"}
            },
            "key": "properties.name",
            "fields": ["properties", "geometry", "type"]
          }
        }
      ]
    }
  ],
  "params": [
    {
      "name": "geoHover",
      "select": {"type": "point", "on": "pointerover", "clear": "pointerout"},
      "views": ["CHART_0"]
    }
  ],
  "projection": {"type": "equalEarth"},
  "height": "container",
  "width": "container"
}

解决方案 #

核心问题是上层带lookup的CHART_1图层覆盖在底层CHART_0之上，鼠标实际悬停的是上层图层，但悬停参数仅监听底层图层，且两个图层没有通过共同标识关联高亮状态。修改方案如下：

关键改动 #

1. 调整悬停参数的监听目标与字段：让参数监听上层CHART_1，并捕获country字段作为匹配标识。
2. 基于国家名称同步两个图层的高亮：底层CHART_0通过判断自身properties.name是否与参数选中的country匹配，触发边框高亮。

修改后的完整配置 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"country": "United States of America", "value": 18000},
      {"country": "Canada", "value": 7500},
      {"country": "Mexico", "value": 4200},
      {"country": "Brazil", "value": 6800},
      {"country": "Argentina", "value": 3100},
      {"country": "Chile", "value": 2400}
    ]
  },
  "layer": [
    {
      "name": "CHART_0",
      "data": {
        "url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
        "format": {"type": "topojson", "feature": "countries"}
      },
      "mark": {"type": "geoshape", "fill": "#e9e6ef", "cursor": "pointer"},
      "encoding": {
        "stroke": {
          "condition": {"test": "geoHover && datum.properties.name === geoHover.country", "value": "black"},
          "value": "white"
        },
        "strokeWidth": {
          "condition": {"test": "geoHover && datum.properties.name === geoHover.country", "value": 2},
          "value": 0.5
        }
      }
    },
    {
      "name": "CHART_1",
      "encoding": {
        "color": {
          "field": "value",
          "type": "quantitative",
          "scale": {"scheme": "blues"}
        }
      },
      "layer": [
        {"mark": {"type": "geoshape", "tooltip": true, "cursor": "pointer"}}
      ],
      "transform": [
        {
          "lookup": "country",
          "from": {
            "data": {
              "url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
              "format": {"type": "topojson", "feature": "countries"}
            },
            "key": "properties.name",
            "fields": ["properties", "geometry", "type"]
          }
        }
      ]
    }
  ],
  "params": [
    {
      "name": "geoHover",
      "select": {"type": "point", "on": "pointerover", "clear": "pointerout", "fields": ["country"]},
      "views": ["CHART_1"]
    }
  ],
  "projection": {"type": "equalEarth"},
  "height": "container",
  "width": "container"
}

说明 #

• 悬停参数geoHover现在监听上层的CHART_1，并获取选中要素的country字段值。
• 底层CHART_0通过test条件判断当前要素的properties.name是否等于geoHover.country，以此触发边框的颜色和宽度变化，实现与上层要素的高亮同步。
• 保留了lookup转换，同时确保悬停交互正常工作。

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