如何在PyVis中实现带碰撞避免的节点名称按钮/标签渲染

核心思路 #

PyVis基于Vis.js实现，要解决文本叠加问题，需通过自定义节点模板、配置Vis.js物理引擎碰撞规则，结合动态尺寸适配来达成目标——让节点标签成为可变长度的容器，同时具备碰撞避让和拖拽能力。

具体实现步骤 #

1. 自定义节点容器模板 #

将节点设为box形状，通过内联样式控制文本显示规则，保证可变长度文本的完整性：

from pyvis.network import Network

net = Network(width="100%", height="800px")

# 添加不同长度文本的节点
net.add_node(1, label="短文本", shape="box",
             style="padding: 8px 12px; border-radius: 4px; background: #2196F3; color: white; white-space: nowrap;")
net.add_node(2, label="中等长度的节点名称", shape="box",
             style="padding: 8px 12px; border-radius: 4px; background: #4CAF50; color: white; white-space: nowrap;")
net.add_node(3, label="非常非常长的节点名称示例，测试可变长度文本", shape="box",
             style="padding: 8px 12px; border-radius: 4px; background: #FF9800; color: white; white-space: nowrap;")

white-space: nowrap确保文本不换行，内边距为文本预留空间，避免边缘裁切。

2. 启用碰撞避免的物理引擎配置 #

通过set_options传递Vis.js物理引擎参数，开启节点碰撞避让：

net.set_options("""
{
  "physics": {
    "forceAtlas2Based": {
      "gravitationalConstant": -60,
      "centralGravity": 0.02,
      "springLength": 120,
      "springConstant": 0.09
    },
    "maxVelocity": 50,
    "solver": "forceAtlas2Based",
    "timestep": 0.35,
    "stabilization": {
      "enabled": true,
      "iterations": 1000,
      "updateInterval": 25
    },
    "barnesHut": {
      "avoidOverlap": 0.6  # 碰撞避让系数，0-1之间，值越大避让强度越高
    }
  }
}
""")

avoidOverlap是核心参数，可根据节点数量、文本长度调整，0.6为适中取值。

3. 动态适配节点尺寸 #

添加自定义JavaScript，自动根据文本长度调整节点大小，确保物理引擎能准确识别碰撞范围：

net.prepend_html("""
<script type="text/javascript">
  function adjustNodeSizes() {
    const nodes = network.body.nodes;
    nodes.forEach(node => {
      const labelElement = node.dom.getElementsByTagName('span')[0];
      if (labelElement) {
        // 加内边距补偿，保证文本不贴边
        const width = labelElement.offsetWidth + 24;
        const height = labelElement.offsetHeight + 16;
        node.setOptions({width, height});
      }
    });
  }
  // 绘图完成后调整尺寸
  network.on("afterDrawing", adjustNodeSizes);
  // 拖拽结束后重新适配（可选）
  network.on("dragEnd", adjustNodeSizes);
</script>
""")

4. 完整可运行示例 #

from pyvis.network import Network

# 初始化网络
net = Network(width="100%", height="800px")

# 添加节点
nodes = [
    (1, "短文本"),
    (2, "中等长度的节点名称"),
    (3, "非常非常长的节点名称示例，测试可变长度文本"),
    (4, "另一个超长文本节点，看看碰撞避免效果")
]
for node_id, label in nodes:
    net.add_node(node_id, label=label, shape="box",
                 style="padding: 8px 12px; border-radius: 4px; background: #2196F3; color: white; white-space: nowrap; font-size: 14px;")

# 添加示例边
net.add_edge(1, 2)
net.add_edge(2, 3)
net.add_edge(3, 4)
net.add_edge(1, 4)

# 配置物理引擎
net.set_options("""
{
  "physics": {
    "forceAtlas2Based": {
      "gravitationalConstant": -60,
      "centralGravity": 0.02,
      "springLength": 120,
      "springConstant": 0.09
    },
    "maxVelocity": 50,
    "solver": "forceAtlas2Based",
    "timestep": 0.35,
    "stabilization": {
      "enabled": true,
      "iterations": 1000,
      "updateInterval": 25
    },
    "barnesHut": {
      "avoidOverlap": 0.6
    }
  },
  "nodes": {
    "borderWidth": 2,
    "borderColor": "#fff"
  }
}
""")

# 添加动态尺寸适配脚本
net.prepend_html("""
<script type="text/javascript">
  function adjustNodeSizes() {
    const nodes = network.body.nodes;
    nodes.forEach(node => {
      const labelElement = node.dom.getElementsByTagName('span')[0];
      if (labelElement) {
        const width = labelElement.offsetWidth + 24;
        const height = labelElement.offsetHeight + 16;
        node.setOptions({width, height});
      }
    });
  }
  network.on("afterDrawing", adjustNodeSizes);
  network.on("dragEnd", adjustNodeSizes);
</script>
""")

# 生成可视化页面
net.show("pyvis_collision_avoidance.html")

关键说明 #

• 碰撞避让效果需根据实际场景调整avoidOverlap参数，节点密集时可适当提高数值。
• 拖拽功能为PyVis默认支持，无需额外配置，节点默认支持拖拽操作。
• 动态尺寸适配保证节点大小与文本长度匹配，让物理引擎的碰撞检测更精准。

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