Pyvis Network节点点击变色功能实现求助

你的问题出在直接覆盖graph.options导致默认交互配置丢失，以及部分vis.js配置的正确使用方式上。以下是可行的修复方案：

核心问题分析 #

Pyvis基于vis.js实现，直接赋值graph.options会替换掉库内置的默认交互逻辑（比如节点点击事件的绑定），导致你配置的highlight颜色无法触发。正确的做法是使用graph.set_options()方法来合并自定义配置和默认配置，而非完全替换。

修复后的代码 #

import pandas as pd
from pyvis.network import Network

data = [['A','B', 1], ['A','C', 4], ['B','A', 1], 
        ['D','E', 5], ['D','F', 1], ['G','J', 7],
        ['A','J', 4], ['G','F', 14], ['C','L', 4], 
        ['A','F', 2], ['E','H', 12], ['I','E', 2],
        ['I','K', 4], ['L','H', 21]]

df = pd.DataFrame(data, columns=['source', 'target', 'feature_count'])

# 初始化Network
graph = Network(height='750px', width='100%', directed=True)

# 收集所有唯一节点，避免重复添加
all_nodes = pd.concat([df['source'], df['target']]).unique()
for node in all_nodes:
    graph.add_node(n_id=node, label=node, labelHighlightBold=True)

# 添加边
edge_data = zip(df['source'], df['target'], df['feature_count'])
for source, target, weight in edge_data:
    graph.add_edge(source, target, value=weight, title=str(weight), arrowStrikethrough=False)

# 使用set_options合并配置，而非直接替换options
options = """
{
  "configure": {
    "enabled": true
  },
  "interaction": {
    "hover": true,
    "selectable": true  // 显式开启节点选择功能
  },
  "nodes": {
    "borderWidth": 2,
    "borderWidthSelected": 4,
    "chosen": true,
    "color": {
      "highlight": {
        "border": "#FF4040",
        "background": "#EE3B3B"
      },
      "hover": {
        "border": "#DEB887",
        "background": "#FFD39B"
      }
    }
  }
}
"""
graph.set_options(options)

# 生成可视化
graph.show('graph.html')

关键修改点 #

• 用graph.set_options()替代直接赋值：该方法会将你的自定义配置与Pyvis的默认配置合并，保留必要的交互事件绑定。
• 显式开启selectable：在interaction配置中添加"selectable": true，确保节点可以被选中触发highlight效果。
• 优化节点添加逻辑：先收集所有唯一节点再批量添加，避免循环中重复调用add_node，提升代码效率。
• 将options改为字符串格式：set_options()接收JSON格式的字符串，比字典更稳定，避免Pyvis解析字典时出现格式问题。

额外验证 #

生成HTML后，若浏览器因本地文件安全限制导致交互异常，可启动Python内置服务器访问：

python -m http.server

然后打开http://localhost:8000/graph.html即可正常测试点击效果。

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