如何在Vega中鼠标悬停节点时高亮对应链接

你的配置核心问题在于力导向布局的链接数据中，source和target是节点对象而非直接的id值，直接用datum.source === active无法匹配，需要调整判断逻辑，具体修正如下：

1. 保留Signals配置（无需修改） #

你的信号定义没问题，active信号会在鼠标悬停节点时存储当前节点的id，移出时重置为null：

"signals": [
  { "name": "colorIn", "value": "firebrick" },
  { "name": "colorOut", "value": "forestgreen" },
  { "name": "originX", "update": "width / 2" },
  { "name": "originY", "update": "height / 2" },
  {
    "name": "active", "value": null,
    "on": [
      { "events": "symbol:mouseover", "update": "datum.id" },
      { "events": "mouseover[!event.item]", "update": "null" }
    ]
  }
]

2. 修改链接的Stroke判断逻辑 #

将链接的stroke判断条件改为比较节点对象的id属性，同时可以增加strokeWidth和opacity来强化高亮效果：

"marks": [
  // ... 其他marks（节点等）
  {
    "type": "path",
    "from": {"data": "links"},
    "encode": {
      "update": {
        "stroke": [
          {"test": "datum.source.id === active", "signal": "colorOut"},
          {"test": "datum.target.id === active", "signal": "colorIn"},
          {"value": "steelblue"}
        ],
        "strokeWidth": [
          {"test": "datum.source.id === active || datum.target.id === active", "value": 2},
          {"value": 1}
        ],
        "opacity": [
          {"test": "datum.source.id === active || datum.target.id === active", "value": 1},
          {"value": 0.5}
        ],
        "path": {"signal": "path('M', datum.source.x, datum.source.y, 'L', datum.target.x, datum.target.y)"}
      }
    }
  }
]

关键说明 #

• 力导向布局生成的links数据中，source和target是指向nodes数组的引用对象，包含该节点的所有属性（如id、x、y等），因此必须通过datum.source.id才能拿到节点的id值与active信号匹配。
• 额外添加的strokeWidth和opacity可以让高亮效果更清晰，非高亮链接会变细变暗，突出当前节点的关联链接。

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