vis-network 网络布局配置完全指南

vis-network 网络布局配置完全指南

vis-network :dizzy: Display dynamic, automatically organised, customizable network views. 项目地址: https://gitcode.com/gh_mirrors/vi/vis-network

vis-network 是一个功能强大的网络可视化库，它提供了多种布局选项来帮助用户以清晰有序的方式展示复杂的网络结构。本文将深入解析 vis-network 中的布局配置选项，帮助开发者掌握网络可视化的布局控制技巧。

布局模块概述

vis-network 的布局模块主要负责控制节点在网络画布上的排列方式。它提供了两种主要的布局方式：

1. 随机布局：节点随机分布在画布上
2. 层次布局：节点按照层级关系有序排列

布局配置通过 layout 对象进行设置，可以精细控制网络的可视化效果。

基础布局配置

随机种子 (randomSeed)

layout: {
  randomSeed: 42
}

• 作用：控制随机布局的初始种子值
• 类型：数字或字符串
• 默认值：undefined（每次生成不同布局）
• 使用建议：
  • 未设置时每次生成不同的随机布局
  • 设置固定值可确保每次生成相同的布局
  • 可以先不设置，找到满意的布局后用 getSeed() 获取当前种子值

改进布局 (improvedLayout)

layout: {
  improvedLayout: true
}

• 作用：启用改进的初始布局算法
• 类型：布尔值
• 默认值：true
• 算法细节：
  • 使用 Kamada Kawai 算法优化初始布局
  • 节点数超过100时自动应用聚类算法
  • 可能回退到传统方法（持续改进中）

聚类阈值 (clusterThreshold)

layout: {
  clusterThreshold: 150
}

• 作用：设置触发聚类算法的节点数量阈值
• 类型：数字
• 默认值：150
• 注意事项：仅当 improvedLayout 启用时有效

层次布局配置

层次布局适合展示具有明确层级关系的数据，如组织结构图、决策树等。

基本启用方式

layout: {
  hierarchical: true  // 使用默认配置启用层次布局
}

或

layout: {
  hierarchical: {
    enabled: true,
    // 其他配置项...
  }
}

启用层次布局后，系统会自动调整物理模型和边类型以获得最佳显示效果。

核心配置参数

层级间距 (levelSeparation)

hierarchical: {
  levelSeparation: 150
}

• 作用：控制不同层级之间的垂直/水平距离
• 类型：数字
• 默认值：150

节点间距 (nodeSpacing)

hierarchical: {
  nodeSpacing: 100
}

• 作用：设置同一层级内节点之间的最小距离
• 类型：数字
• 默认值：100
• 注意：仅影响初始布局，启用物理模型后由物理规则决定

树间距 (treeSpacing)

hierarchical: {
  treeSpacing: 200
}

• 作用：控制独立子树之间的间距
• 类型：数字
• 默认值：200

布局优化选项

块偏移 (blockShifting)

hierarchical: {
  blockShifting: true
}

• 作用：通过移动节点块来减少空白区域
• 类型：布尔值
• 默认值：true
• 优势：可单独使用或与边最小化配合，显著减少稳定时间

边最小化 (edgeMinimization)

hierarchical: {
  edgeMinimization: true
}

• 作用：通过调整节点位置使边总长度最小化
• 类型：布尔值
• 默认值：true
• 最佳实践：与块偏移配合使用效果更佳

父节点居中 (parentCentralization)

hierarchical: {
  parentCentralization: true
}

• 作用：在布局完成后将父节点重新居中
• 类型：布尔值
• 默认值：true

布局方向控制

方向 (direction)

hierarchical: {
  direction: 'UD'  // 可选值: UD, DU, LR, RL
}

• 作用：设置层次布局的主方向
• 可选值：
  • UD：从上到下 (Up-Down)
  • DU：从下到上 (Down-Up)
  • LR：从左到右 (Left-Right)
  • RL：从右到左 (Right-Left)
• 默认值：UD

层级排序算法

排序方法 (sortMethod)

hierarchical: {
  sortMethod: 'hubsize'  // 可选值: hubsize, directed
}

• 作用：决定节点层级分配算法
• 算法选项：
  • hubsize：连接数最多的节点放在最顶层
  • directed：基于边的方向确定层级（A→B表示B在A的下层）
• 默认值：hubsize

抖动方向 (shakeTowards)

hierarchical: {
  shakeTowards: 'leaves'  // 可选值: roots, leaves
}

• 作用：控制布局对齐方式
• 选项：
  • roots：所有根节点尽可能对齐顶部
  • leaves：所有叶节点尽可能对齐底部
• 默认值：roots

实际应用建议

1. 大型网络处理：

   • 启用 improvedLayout 以获得更好的初始布局
   • 考虑调整 clusterThreshold 以优化性能

2. 层次布局优化：

   • 结合使用 blockShifting 和 edgeMinimization 减少空白区域
   • 根据数据类型选择合适的 sortMethod

3. 一致性需求：

   • 使用 randomSeed 确保每次生成相同的布局
   • 记录满意的布局种子以备后用

4. 方向选择：

   • 根据显示空间选择合适的 direction
   • 横向布局(LR/RL)适合宽屏显示

通过灵活组合这些布局选项，开发者可以创建出既美观又能清晰表达数据关系的网络可视化效果。vis-network 的强大布局系统为复杂数据的可视化提供了坚实的基础。

vis-network :dizzy: Display dynamic, automatically organised, customizable network views. 项目地址: https://gitcode.com/gh_mirrors/vi/vis-network