Visjs 分层布局 新增节点 edge边交叉问题

Question

Visjs 分层布局 后续会通过双击新增新的节点数据
在新增第四层的时候出现边交叉的问题
请教一下 如何避免这种问题呢

这是我的配置项

      nodes: {
        font: {
          size: 0
        },
        size: 10
      },
      layout: {
        randomSeed: 1,
        improvedLayout : true,
        hierarchical: {
          enabled: true,
          levelSeparation: 200,
          nodeSpacing: 100,
          treeSpacing: 0,
          blockShifting: true,
          edgeMinimization: false,
          parentCentralization: true,
          sortMethod: "directed",
          direction: "UD",
          shakeTowards: "roots"
        }
      },
      physics: {
        enabled: false,
        forceAtlas2Based: {
          springConstant: 1
        },
        "barnesHut": {
          "avoidOverlap": 0.2
        },
        repulsion: {
          nodeDistance: 100,
        },
        stabilization: {
          fit: true
        }
      },
      edges: {
        font: { align: "top" },
        smooth: false,
        arrows: {
          to: {
            scaleFactor: 0.3
          }
        }
      }

这是我现在的效果 如何避免图中箭头指向的交叉问题？

Answer 1

该回复引自免费微信小程序-皆我百晓生:

---

为了避免边交叉问题，你可以尝试以下几种方法：

1. 调整节点间的层级间隔（levelSeparation）和节点间的间距（nodeSpacing），增加它们的数值。这样可以让每一层中的节点更加分散，减少边交叉的可能性。

2. 尝试调整树形布局的方法（sortMethod）为其他选项，例如"hierarchical"或"hubsize"，看看是否可以改善边的交叉。

3. 调整节点的大小（size）和字体的大小（font.size），可以使节点和边的布局更加紧凑，减少边交叉的可能性。

4. 将节点的物理力学效果（physics.enabled）设为true，使用力导向布局算法。这种布局方法可以根据节点之间的连线来调整它们的位置，从而减少边交叉的问题。

5. 如果你的图中节点数量较少，可以尝试将布局的方向（direction）设为"LR"或"RL"，即从左到右或从右到左的布局方式，这样也可以减少边交叉的可能性。

希望这些方法能帮助你解决边交叉问题。