pyvis网络图如何实现仅显示选中节点关联边、隐藏其余未选中边？

核心逻辑 #

pyvis本质是对vis.js Network的Python封装层，默认仅开放少量常用配置项，所有底层交互效果都可以通过注入自定义前端JavaScript代码实现，不需要修改pyvis源码，也不需要手动调整生成的HTML文件。

实现步骤 #

• 初始化网络实例时，根据节点、边的规模提前调整默认边样式，降低初始图面的拥挤感
• 直接监听网络实例的节点选中、取消选中事件，动态更新所有边的显隐状态：选中节点时仅保留与该节点直接连接的边为可见状态，其余边全部设为隐藏；取消选中时恢复边的初始展示状态

可直接复用的代码示例 #

from pyvis.network import Network

# 初始化画布，配置基础尺寸
net = Network(height="800px", width="100%", bgcolor="#222222", font_color="white")

# 常规添加节点、边的业务逻辑
# 示例： net.add_node(1, label="节点1"), net.add_edge(1,2) 等
# net.add_nodes(custom_node_list)
# net.add_edges(custom_edge_list)

# 前置配置所有边的初始样式，避免未选中状态图面拥挤
for edge in net.edges:
    edge["opacity"] = 0.2
    edge["width"] = 1

# 自定义交互逻辑，实现选中节点的边显隐控制
custom_interaction_js = """
// 节点选中触发逻辑
network.on("selectNode", function(select_params) {
    const active_node_id = select_params.nodes[0];
    // 遍历全量边，逐个更新显隐状态
    edges.get().forEach(edge_item => {
        const is_connected = edge_item.from === active_node_id || edge_item.to === active_node_id;
        network.body.data.edges.update({
            id: edge_item.id,
            hidden: !is_connected,
            opacity: is_connected ? 1 : 0.2,
            width: is_connected ? 3 : 1
        })
    })
})

// 取消节点选中触发逻辑，恢复边的初始状态
network.on("deselectNode", function() {
    edges.get().forEach(edge_item => {
        network.body.data.edges.update({
            id: edge_item.id,
            hidden: false,
            opacity: 0.2,
            width: 1
        })
    })
})
"""

# 将自定义逻辑注入到生成的页面脚本中
net.html.add_script(custom_interaction_js)
# 导出可交互的HTML文件
net.write_html("interactive_dense_network.html")

可灵活调整的参数 #

• 如果需要初始状态完全隐藏所有边，只需要在前置边配置的循环中，为每条边额外设置edge["hidden"] = True
• 关联边的展示样式（颜色、粗细、透明度）可以在JS逻辑中直接修改，适配不同的视觉要求
• 取消选中节点时的状态可以自定义为「所有边全部隐藏」「边恢复低透明度显示」等不同逻辑，不需要绑定固定的交互效果

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