antv/g6之图布局及切换布局

一般图布局

目前为止，g6的一般图布局已经有13种了，如下:

• Random Layout：随机布局；
• Force2 Layout：G6 4.7.0 后支持力导向布局，与 gForce 相比性能更强；
• GForce Layout：G6 4.0 支持的经典力导向布局，支持 GPU 并行计算；
• Force Layout：引用 d3 的经典力导向布局；
• Fruchterman Layout：Fruchterman 布局，一种力导布局；
• Circular Layout：环形布局；
• Radial Layout：辐射状布局；
• MDS Layout：高维数据降维算法布局；
• Dagre Layout：层次布局；
• Concentric Layout：同心圆布局；
• Grid Layout：网格布局；
• Combo Force Layout：*V3.5 新增。*适用于带有 combo 图的力导向布局，推荐有 combo 的图使用该布局。
• Combo Combined Layout：*V4.6 新增。*适用于带有 combo 的图，可自由组合内外布局，默认情况下可以有较好的效果，推荐有 combo 的图使用该布局。

今天就挑其中的随机、gForce、dagre、circular布局介绍下，官网文档介绍很全面，感兴趣的可以去看看。

随机布局Random Layout

Random 布局是 G6 中的默认布局方法。当实例化图时没有指定布局方法，且数据中也不存在位置信息时，G6 将自动使用 Random 布局。随机布局的配置参数很简单，使用及介绍如下：

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'random', // 定义为随机布局
    center:[100,100], // 画布中心
    width: 300, // 画布宽
    height: 300, // 画布高
    workerEnabled: true //	Boolean	true / false	false	是否启用 web-worker 以防布局计算时间过长阻塞页面交互

  },
});

gForce布局

GForce 实现了经典的力导向算法，G6 4.0 支持。能够更加自由地支持设置节点质量、群组中心力等。更重要的是，它支持 GPU 并行计算。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'gForce',
    center: [ 200, 200 ],     // 可选，默认为图的中心
    linkDistance: 50,         // 可选，边长
    nodeStrength: 30,         // 可选 节点作用力，正数代表节点之间的斥力作用，负数代表节点之间的引力作用（注意与 'force' 相反）
    edgeStrength: 0.1,        // 可选 边的作用力（引力）大小
    preventOverlap: false,    //可选 是否防止重叠，必须配合下面属性 nodeSize 或节点数据中的 size 属性
    nodeSize: 30,             // 可选 节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点的 size 属性计算。
    nodeSpacing:10, //可选 preventOverlap 为 true 时生效, 防止重叠时节点边缘间距的最小值
    minMovement: 0.5, // 可选，当一次迭代的平均移动长度小于该值时停止迭代。
    maxIteration: 1000, // 可选， 最大迭代次数。
    damping: 0.9, // 可选 阻尼系数，取值范围 [0, 1]。数字越大，速度降低得越慢
    maxSpeed: 1000, //可选 一次迭代的最大移动长度
    onTick: () => {           // 可选 
      console.log('ticking');
    },
    onLayoutEnd: () => {      // 可选
      console.log('force layout done');
    },
    workerEnabled: true,      // 可选，开启 web-worker
    gpuEnabled: true          // 可选，开启 GPU 并行计算，G6 4.0 支持
  }
});

dagre 层次布局

g6支持使用 Dagre 布局来自动排列图中的节点，以形成层次结构。层次布局将自动排列节点和边，以形成层次结构，其中节点和边的位置由布局算法决定。可以创建层次结构的图形布局。根据具体的需求调整布局的方向、对齐方式和其他参数。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'dagre',
    rankdir: 'LR', // 可选，默认为图的中心
    align: 'DL', // 可选 节点对齐方式
    nodesep: 20, // 可选 节点间距（px）。
    ranksep: 50, // 可选 层间距（px）
    controlPoints: true, // 可选 是否保留布局连线的控制点
    sortByCombo: false //  同一层节点是否根据每个节点数据中的 comboId 进行排序，以防止 combo 重叠
  },
});

参数说明：
rankdir： ‘TB’（默认）：从上至下布局；‘BT’：从下至上布局；‘LR’：从左至右布局；‘RL’：从右至左布局。
align： ‘UL’（默认）：对齐到左上角；‘UR’：对齐到右上角；‘DL’：对齐到左下角；‘DR’：对齐到右下角；undefined：默认，中间对齐。
**nodesepFunc：**默认undefined。节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在rankdir 为 ‘TB’ 或 ‘BT’ 时是节点的水平间距；在rankdir 为 ‘LR’ 或 ‘RL’ 时代表节点的竖直方向间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效。

Circular 环形布局

Circular（环形）布局是一种图形布局算法，用于将图中的节点排列在一个环形的方式中。这种布局常用于呈现具有明显中心节点的图，如组织结构图、网络拓扑图等。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'circular',
    center: [200, 200], // 可选，默认为图的中心
    radius: null, // 可选 圆的半径。若设置了 radius，则 startRadius 与 endRadius 不生效
    startRadius: 10, // 螺旋状布局的起始半径
    endRadius: 100, // 螺旋状布局的结束半径
    clockwise: false, // 可选 否顺时针排列
    divisions: 5, // 可选 节点在环上的分段数（几个段将均匀分布）
    ordering: 'degree', // 可选 
    angleRatio: 1, // 可选 从第一个节点到最后节点之间相隔多少个 2*PI
    ordering: false, // null | 'topology' | 'degree' 节点在环上排序的依据。
    workerEnabled: false //是否启用 web-worker 以防布局计算时间过长阻塞页面交互。
  },
});

切换布局

G6 中，可以使用 updateLayout 方法来更新图表的布局，而不必重新创建一个新的图表实例。updateLayout 方法允许你切换布局类型，并重新排列节点和边，以便在当前图表上应用新的布局。

以下是如何使用 updateLayout 方法来切换布局的示例：

// 创建图表实例，初始时使用 Circular 布局
const graph = new G6.Graph({
  container: 'your-container',
  width: 800,
  height: 600,
  layout: {
    type: 'circular',
    radius: 200,
    startAngle: 0,
    endAngle: Math.PI * 2,
  },
  // 其他配置...
});

    // 4000 ms 后切换为不允许节点重叠且边长为 100 的 force 布局。
      setTimeout(() => {
        graph.updateLayout({
          type: 'force', // 布局名称
          preventOverlap: true, // 布局参数，是否允许重叠
          nodeSize: 40, // 布局参数，节点大小，用于判断节点是否重叠
          linkDistance: 100, // 布局参数，边长
        });
      }, 10000);