如何在Vega中悬停节点以高亮特定关联链接？

针对官方力导向布局示例，以下是实现悬停节点时高亮其关联链接及邻域节点的完整修改方案：

1. 更新Signals配置 #

保留核心信号逻辑，优化事件触发规则确保状态重置正常：

"signals": [
  { "name": "colorIn", "value": "firebrick" },
  { "name": "colorOut", "value": "forestgreen" },
  { "name": "active", "value": null,
    "on": [
      { "events": "symbol:mouseover", "update": "datum.id" },
      { "events": "mouseout, window:pointerup", "update": "null" }
    ]
  }
]

2. 修改链接（path标记）的Encode配置 #

为关联链接设置高亮样式，非关联链接降低透明度弱化显示：

"marks": [
  {
    "type": "path",
    "encode": {
      "update": {
        "stroke": [
          {"test": "datum.source.id === active", "signal": "colorOut"},
          {"test": "datum.target.id === active", "signal": "colorIn"},
          {"value": "#ccc"}
        ],
        "strokeOpacity": [
          {"test": "datum.source.id === active || datum.target.id === active", "value": 1},
          {"value": 0.1}
        ],
        "strokeWidth": [
          {"test": "datum.source.id === active || datum.target.id === active", "value": 2},
          {"value": 1}
        ]
      }
    }
  }
]

3. 修改节点（symbol标记）的Encode配置 #

区分悬停节点、邻域节点与其他节点的显示状态，强化层级：

{
  "type": "symbol",
  "encode": {
    "update": {
      "fill": [
        {"test": "datum.id === active || data('links').some(l => (l.source.id === active && l.target.id === datum.id) || (l.target.id === active && l.source.id === datum.id))", "value": "#ff9800"},
        {"value": "#ccc"}
      ],
      "opacity": [
        {"test": "datum.id === active || data('links').some(l => (l.source.id === active && l.target.id === datum.id) || (l.target.id === active && l.source.id === datum.id))", "value": 1},
        {"value": 0.3}
      ],
      "size": [
        {"test": "datum.id === active", "value": 300},
        {"test": "data('links').some(l => (l.source.id === active && l.target.id === datum.id) || (l.target.id === active && l.source.id === datum.id))", "value": 200},
        {"value": 150}
      ]
    }
  }
}

关键逻辑说明 #

• 链接识别：通过datum.source.id === active和datum.target.id === active判断是否为悬停节点的入/出链接，分别设置不同高亮色，非关联链接用浅灰色+低透明度弱化。
• 节点邻域判断：利用data('links').some(...)遍历链接数据，识别与悬停节点直接相连的邻域节点，为悬停节点、邻域节点、普通节点设置差异化样式。
• 状态重置：优化事件触发规则，确保鼠标移出节点或点击空白区域时，高亮状态能正确重置。

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