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-workergpuEnabled: 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*PIordering: 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);