一般图布局
目前为止，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);
