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: