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

本文主要是介绍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);