如何借助NetworkX与Pyvis实现图节点及边的点击事件功能？

Pyvis本身没有直接提供点击事件的API，但它基于vis-network库生成HTML，所以可以通过注入自定义JavaScript代码来实现点击事件功能，具体步骤如下：

方法1：直接修改Pyvis生成的HTML文件 #

1. 先用Pyvis生成基础网络图并保存为HTML：

from pyvis.network import Network

# 创建网络图实例
net = Network(notebook=False)
# 添加节点（可通过title字段存储自定义信息）
net.add_node(1, label="节点1", title="这是节点1的详细说明")
net.add_node(2, label="节点2", title="这是节点2的详细说明")
# 添加边（同样用title存储信息）
net.add_edge(1, 2, title="这条边连接节点1和节点2，代表XX关系")
# 保存为HTML文件
net.write_html("basic_network.html")

2. 打开生成的basic_network.html，找到初始化vis-network的代码块（通常是var network = new vis.Network(container, data, options);），在其下方添加点击事件监听代码：

// 监听节点/边点击事件
network.on("click", function(params) {
    // 点击节点的情况
    if (params.nodes.length > 0) {
        const nodeId = params.nodes[0];
        const node = data.nodes.get(nodeId);
        // 这里用alert展示信息，也可以自定义弹窗或页面元素
        alert(`节点信息：
ID: ${nodeId}
标签: ${node.label}
详细内容: ${node.title}`);
    }
    // 点击边的情况
    else if (params.edges.length > 0) {
        const edgeId = params.edges[0];
        const edge = data.edges.get(edgeId);
        alert(`边信息：
ID: ${edgeId}
连接节点: ${edge.from} → ${edge.to}
详细内容: ${edge.title}`);
    }
});

方法2：在Python代码中直接注入JS（无需手动修改HTML） #

可以通过Pyvis的prepend_html方法，将自定义JS代码提前注入到生成的HTML中，实现自动化：

from pyvis.network import Network

net = Network(notebook=False)
# 添加节点和边
net.add_node(1, label="节点A", title="节点A的详细描述：XX模块")
net.add_node(2, label="节点B", title="节点B的详细描述：XX模块")
net.add_edge(1, 2, title="边的说明：A和B存在数据交互")

# 定义点击事件的JS代码
click_event_js = """
network.on("click", function(params) {
    if (params.nodes.length > 0) {
        const node = data.nodes.get(params.nodes[0]);
        alert(`节点信息：
ID: ${params.nodes[0]}
标签: ${node.label}
详细内容: ${node.title}`);
    } else if (params.edges.length > 0) {
        const edge = data.edges.get(params.edges[0]);
        alert(`边信息：
ID: ${params.edges[0]}
连接: ${edge.from} → ${edge.to}
详细内容: ${edge.title}`);
    }
});
"""

# 将JS代码注入到HTML中
net.prepend_html(f"""
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {{
        {click_event_js}
    }});
</script>
""")

# 保存带交互功能的HTML
net.write_html("interactive_network.html")

原理说明 #

Pyvis本质是对vis-network库的Python封装，生成的HTML文件已经包含了vis-network的核心初始化逻辑。我们只需要利用vis-network原生的click事件API，添加自定义的信息展示逻辑即可。你可以根据需求替换alert为更美观的弹窗（比如自定义div元素、模态框等）。

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