如何在HTML中使用Py-Script渲染NetworkX生成的图形？

问题说明 #

在Py-Script的py-repl环境中，使用NetworkX生成图形后调用plt.show()无法显示图形，但numpy结合matplotlib的示例代码（直接返回figure对象）可正常渲染，且已确认matplotlib、networkx等依赖包在Pyodide中可用。

解决方案 #

Py-Script的py-repl环境中，渲染matplotlib图形需要直接返回figure对象，plt.show()在该环境下不会触发图形渲染。针对NetworkX的场景，有两种可行方式：

方式1：获取当前Figure并返回 #

调用nx.draw()后，不使用plt.show()，而是通过plt.gcf()获取当前生成的Figure对象并返回。

方式2：显式创建Figure和Axes并传入NetworkX #

提前创建matplotlib的Figure和Axes对象，将Axes传给nx.draw()的ax参数，最后返回Figure对象。

修改后的测试代码 #

测试用HTML代码 #

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> 
        - matplotlib 
        - networkx 
    </py-env>
  </head>
  <py-repl></py-repl>
</html>

方式1对应的NetworkX代码 #

import matplotlib.pyplot as plt
import networkx as nx

G = nx.Graph()
nodes_california = ["Los Ángeles", "San Diego", "San Francisco"]
nodes_florida = ["Miami", "Orlando", "Tampa"]

G.add_nodes_from(nodes_california)
G.add_nodes_from(nodes_florida)

G.add_edge("California", "Los Ángeles")
G.add_edge("California", "San Diego")
G.add_edge("California", "San Francisco")
G.add_edge("Florida", "Miami")
G.add_edge("Florida", "Orlando")
G.add_edge("Florida", "Tampa")

nx.draw(G, with_labels=True)
plt.gcf()  # 返回当前Figure对象替代plt.show()

方式2对应的NetworkX代码 #

import matplotlib.pyplot as plt
import networkx as nx

G = nx.Graph()
nodes_california = ["Los Ángeles", "San Diego", "San Francisco"]
nodes_florida = ["Miami", "Orlando", "Tampa"]

G.add_nodes_from(nodes_california)
G.add_nodes_from(nodes_florida)

G.add_edge("California", "Los Ángeles")
G.add_edge("California", "San Diego")
G.add_edge("California", "San Francisco")
G.add_edge("Florida", "Miami")
G.add_edge("Florida", "Orlando")
G.add_edge("Florida", "Tampa")

# 显式创建Figure和Axes
fig, ax = plt.subplots()
nx.draw(G, with_labels=True, ax=ax)
fig  # 返回Figure对象

验证说明 #

以上两种方式均能在py-repl中正常渲染NetworkX生成的图形，逻辑与numpy示例中返回fig的方式一致，符合Py-Script对matplotlib图形渲染的要求。

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