在 Google Colab 中显示网络关系图

Python
可视化
教程
让 Pyvis 网络关系图同时在 Colab 和导出的 HTML 中正常显示，且不依赖外部文件。
作者

Pinn Xu

发布于

2025年10月7日

4 min read · 232 EN words · 737 中文字

1 问题

要想实现让 Pyvis 网络关系图同时在 Google Colab 内部和从 Notebook 导出的 HTML 中正常显示，且不依赖单独的 net.html 文件或其他外部依赖，常见的几种显示方法都无法同时满足这些场景。

2 解决

调用 Network() 时不传入任何参数，手动生成关系图的 HTML，再通过 srcdoc 属性将其包进一个 iframe。由于 srcdoc 的值以单引号界定，需先把生成的 HTML 中的单引号全部替换为双引号。

该方法在 Notebook 能渲染的各种环境下都有效：Jupyter、Colab 1、导出的 HTML 2，乃至 VS Code。

# 创建一个空的网络关系图
gp = Network()  # 不指定任何参数
# 将网络关系添加到关系图中
gp.from_nx(gx)

# 获取关系图的完整 HTML 代码
html = gp.generate_html()
# 格式化：仅使用双引号
html_formatted = html.replace("'", '"')

# 定义 iframe 标签
iframe_start = """
<iframe
style='display:block; margin:0px; width:100%; height:600px'
frameborder='0'
srcdoc='
"""
iframe_end = " '></iframe> "

# 用 iframe 标签包裹格式化后的 HTML 代码
html_wrapped = iframe_start + html_formatted + iframe_end

# 显示
display(HTML(html_wrapped))

3 其他方法及其缺陷

其他方法都需要在调用 Network() 时指定 notebook 和 cdn_resources 参数：

gp = Network(
    notebook=True,
    cdn_resources="in_line",
    height="600px",
    width="100%",
)
gp.from_nx(gx)

而每种显示方法都会在某个场景下失效：

  1. display(HTML(gp.generate_html())) 能在 Colab 中显示关系图且不生成外部文件，但导出的 HTML 中关系图会丢失。
  2. gp.show("net.html") 能在 Jupyter 中显示，但在 Colab 中无效。
  3. generate_html()、save_graph()，以及 gp.show("net.html") 配合 display(HTML(...))，都能在 Colab 中正常显示，但会依赖单独的 net.html 文件或存放依赖的 libs/ 文件夹。

4 在线演示

代码 
# 导入库
import networkx as nx
from pyvis.network import Network
from IPython.display import HTML, display

# 创建一个空的网络关系
gx = nx.MultiDiGraph()

# 添加节点和边
gx.add_edge('a','b')
gx.add_edge('b','d')
gx.add_edge('c','e')
gx.add_edge('e','a')
gx.add_edge('c','d')

# 创建一个空的网络关系图
gp = Network()  # 不指定任何参数

# 将网络关系添加到关系图中
gp.from_nx(gx)

# 获取关系图的完整 HTML 代码
html = gp.generate_html()

# 格式化：仅使用双引号
html_formatted = html.replace("'",'"')

# 定义 iframe 标签
iframe_start = """
<iframe
sandbox='allow-scripts allow-forms'
style='display:block; margin:0px; width:100%; aspect-ratio:3/2;'
frameborder='0'
srcdoc='
"""
iframe_end = " '></iframe> "

# 用 iframe 标签包裹格式化后的 HTML 代码
html_wrapped = iframe_start + html_formatted + iframe_end

# 显示
display(HTML(html_wrapped))
回到顶部