Pyvis编辑后网络HTML图保存及节点布局锁定问题咨询

核心问题原理 #

pyvis底层依赖vis.js绘图库，默认配置下，你手动调整的节点位置仅临时存储在当前浏览器会话的内存中，不会写入HTML文件做持久化存储。每次打开HTML文件时，vis.js都会自动运行物理布局算法重新计算节点、边的位置，所以调整好的布局会重置为初始状态。

问题解答 #

• 可以锁定优化后的网络图，也可以持久化保存节点、边的位置、颜色、长度等配置供下次打开复用。
• 默认情况下节点位置不会持久化存储，仅保存在浏览器内存中，打开HTML时确实是JavaScript动态计算生成布局。

具体实现方法 #

方法1：导出配置后重新生成固定布局的HTML（跨设备通用） #

该方案直接把自定义布局参数写死到HTML中，不管在什么设备打开都能复用布局，是最稳定的方案：

1. 打开手动调整好布局的HTML文件，按F12打开浏览器开发者工具，切换到控制台标签页，输入以下代码导出当前所有节点、边的配置：

// 导出节点配置（含位置、颜色、大小等所有参数）
const nodeConfig = network.body.data.nodes.get({returnType: "Object"})
console.log("节点配置：", JSON.stringify(nodeConfig))
// 导出边配置（含长度、颜色、权重等所有参数）
const edgeConfig = network.body.data.edges.get({returnType: "Object"})
console.log("边配置：", JSON.stringify(edgeConfig))

2. 复制控制台输出的JSON配置，修改你的Python绘图代码，初始化网络时关闭物理布局引擎，按照导出的配置指定节点、边的对应参数：

from pyvis.network import Network

# 初始化时设置physics=False关闭动态布局计算，避免加载时重新排布
net = Network(height="800px", width="100%", directed=True, physics=False)

# 按照导出的配置添加节点，示例：节点id为1的x坐标120，y坐标340，颜色为红色
net.add_node(1, x=120, y=340, color="#ff0000", label="节点1")
# 按照导出的配置添加边，示例：节点1到2的边长度为200，颜色为灰色
net.add_edge(1, 2, length=200, color="#cccccc")

net.show("fixed_layout.html", local=True)

3. 新生成的HTML打开后会直接使用你指定的布局，不会再自动调整。如果需要完全锁定节点不允许拖拽，可以在初始化时额外添加参数interaction={"dragNodes": False}。

方法2：修改原HTML添加本地存储逻辑（无需重新跑Python代码） #

如果不想修改Python代码，可以直接修改已生成的HTML文件，添加自动保存/读取布局的逻辑：

1. 用文本编辑器打开HTML文件，找到network = new vis.Network(container, data, options);这一行代码
2. 在这行代码后面添加以下JS代码：

// 页面加载时读取本地存储的布局配置
if (localStorage.getItem("myNetworkLayout")) {
  const saved = JSON.parse(localStorage.getItem("myNetworkLayout"))
  data.nodes.update(saved.nodes)
  data.edges.update(saved.edges)
}

// 拖拽节点结束后自动保存当前布局到浏览器本地存储
network.on("dragEnd", () => {
  const saveData = {
    nodes: network.body.data.nodes.get({returnType: "Object"}),
    edges: network.body.data.edges.get({returnType: "Object"})
  }
  localStorage.setItem("myNetworkLayout", JSON.stringify(saveData))
})

// 不需要再调整布局的话，可以取消下面这行的注释，完全锁定节点不可拖拽
// network.setOptions({interaction: {dragNodes: false}})

3. 保存修改后的HTML即可，后续在当前浏览器打开该文件会自动加载上次调整的布局。注意该方案的存储仅绑定当前浏览器，换设备/换浏览器打开不会生效。

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