如何为含200+节点的Pyvis交互图添加节点搜索选中功能

两种可直接落地的实现方式，200节点规模下都没有性能问题：

方案1：启用内置控件（5行代码搞定，无需写前端） #

Pyvis底层基于vis.js封装，本身自带节点搜索筛选控件，不用额外写代码就能开启：

from pyvis.network import Network

# 初始化网络图，保留你原有配置即可
net = Network(height="800px", width="100%", bgcolor="#ffffff", font_color="black")

# --- 你原有的加载节点、边的逻辑保留 ---
# net.add_nodes(...)
# net.add_edges(...)

# 开启内置搜索筛选控件
net.show_buttons(filter_=["nodes"])
net.write_html("graph_with_search.html")

生成的页面侧边会自带搜索输入框，输入节点名称会自动过滤匹配节点，高亮匹配结果、淡化非相关节点，点击结果即可跳转定位。缺点是控件样式、位置固定，自定义空间小。

方案2：自定义搜索栏（可定制交互逻辑，支持自动定位选中） #

如果需要实现输入关键词后自动定位、选中目标节点，不需要手动点选结果，可以直接往生成的页面注入少量自定义JS，调用vis.js原生API实现：
你可以直接在Pyvis导出前通过内置方法注入代码，不用手动修改生成的HTML：

# 注入搜索栏的HTML结构，固定在页面左上角
net.add_html("""
<div style="position: fixed; top: 12px; left: 12px; z-index: 999;">
  <input type="text" id="nodeSearch" placeholder="输入节点名称搜索" 
         style="padding: 8px 12px; width: 260px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;">
</div>
""")

# 注入搜索交互逻辑
net.add_js("""
window.addEventListener('load', function() {
  const searchInput = document.getElementById('nodeSearch');
  const graphNetwork = window.network;
  const allNodes = graphNetwork.body.nodeIds;

  searchInput.addEventListener('input', function(e) {
    const keyword = e.target.value.trim();
    // 输入为空时取消选中，恢复全图视图
    if (!keyword) {
      graphNetwork.unselectAll();
      return;
    }
    // 匹配节点，默认匹配label字段，如果你节点名存在其他字段替换对应属性即可
    const targetNode = allNodes.find(function(nodeId) {
      const nodeLabel = graphNetwork.body.nodes[nodeId].options.label || '';
      return nodeLabel.includes(keyword);
    });
    if (targetNode) {
      // 选中目标节点
      graphNetwork.selectNodes([targetNode]);
      // 带动画平滑定位到目标节点，缩放级别可以自己调scale值
      graphNetwork.focus(targetNode, {
        scale: 1.6,
        animation: {duration: 400, easingFunction: 'easeInOutQuad'}
      });
    }
  })
})
""")

# 最后导出HTML
net.write_html("custom_search_graph.html")

可调细节 #

• 如果需要精确匹配，把includes改成===即可；要拼音搜索的话提前给节点加个pinyin属性，匹配的时候一起判断就行
• 搜索栏位置可以通过修改style里的top/left/right值调整，样式也可以自由修改
• 200节点规模下遍历匹配完全无卡顿，如果后续节点量涨到1000以上，给input事件加个300ms的防抖即可

避坑提示：不要用Pyvis旧版本（低于0.3.0），旧版本没有暴露全局network实例，注入的JS拿不到图对象会报错，升级到最新版即可。

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