内置布局导览

F6 提供了以下内置布局算法。可以在实例化图时配置，或独立使用。当内置布局算法不满足需求时，还可以自定义布局。

注意，Graph 布局与 TreeGaph 布局相互不通用。

• Random Layout：随机布局；

• GForce Layout：F6 支持的经典力导向布局，支持 GPU 并行计算：

  力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。

• Force Layout：引用 d3 的经典力导向布局；
• Force Atlas 2 Layout：FA2 力导向布局，比 force 收敛地更好，更紧凑；
• Circular Layout：环形布局；
• Radial Layout：辐射状布局；
• MDS Layout：高维数据降维算法布局；
• Fruchterman Layout：Fruchterman 布局，一种力导布局；
• Dagre Layout：层次布局；
• Concentric Layout：同心圆布局，将重要（默认以度数为度量）的节点放置在布局中心；
• Grid Layout：格子布局，将节点有序（默认是数据顺序）排列在格子上；
• Combo Force Layout：适用于带有 combo 图的力导向布局，推荐有 combo 的图使用该布局。

实例化图时使用布局

在 F6 中使用布局，在实例化图时配置 layout 属性。例如：

const graph = new F6.Graph({
  // ...                      // 其他配置项
  layout: {                // Object，可选，布局的方法及其配置项，默认为 random 布局。
    type: 'force',
    preventOverlap: true,
    nodeSize: 30,
    // workerEnabled: true, // 是否启用 webworker
    // gpuEnabled: true // 是否使用 gpu 版本的布局算法，F6 4.0 支持，目前仅支持 gForce 及 fruchterman。若用户的机器或浏览器不支持 GPU 计算，将会自动降级为 CPU 计算
    ...                    // 其他配置
  }
});

每种布局方法的配置项不尽相同，具体参见本目录下每种布局的 API。
当实例化图时没有配置 layout 时：

• 若数据中节点有位置信息（x 和 y），则按照数据的位置信息进行绘制；
• 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。

单独使用布局

以下方法为通过 const layout = new F6.Layout['layoutName'] 单独使用布局时，或自定义布局时可能需要复写的方法。如果上述两种情况，仅在实例化图时通过配置 layout 使用内置布局方法时，以下方法由 F6 控制并调用，用户不需要了解。

初始化

init(data)

初始化布局。

参数

getDefaultCfg()

返回布局的默认参数。

返回值

布局

execute()

执行布局算法。

layout(data)

根据传入的数据进行布局。

参数

更新

updateCfg(cfg)

更新布局参数。

参数

销毁

destroy()

销毁布局。

AI 智能布局推荐

背景

图可视分析应用中，如何选择合适的布局让每次查询的数据都能够很清晰地展示是一个不小的挑战，虽然我们可以像 Gephi 一样，把布局的配置切换交给用户来做，让用户自己切换布局、调整参数来选择合适的布局，但这样的效率显然太低。为了彻底解决布局选择的问题，F6 提供了智能布局预测的能力，预测引擎会根据查询到的数据，推荐最适合的布局，用户直接使用推荐的布局即可。

定义

智能布局是指在结合神经网络进行建模，通过大量的标注数据（标记布局分类）进行训练输出预测模型，业务场景中针对通过模型对真实的图数据进行预测，从而推荐出该数据最适合的布局分类的方法。

预测引擎

@antv/vis-predict-engine 定位为可视化预测引擎，短期内主要用于图布局的分类预测。常久来看，可视化预测引擎会支持布局配置参数预测、节点类别预测、chart 类别预测等。

F6 中图布局预测的整体流程如下图所示。

用法

AntV 团队将图布局预测的能力封装成 NPM 包 @antv/vis-predict-engine，通过 predict 方法来预测提供的数据应该使用什么布局，基本用法如下。

import F6 from '@antv/g6'
import { GraphLayoutPredict } from '@antv/vis-predict-engine'
const data = {
    nodes: [],
  edges: []
}
// predictLayout 表示预测的布局，如 force 或 radial
// confidence 表示预测的可信度
const { predictLayout, confidence } = await GraphLayoutPredict.predict(data);
const graph = new F6.Graph({
  // 省略其他配置
    layout: {
    type: predictLayout
  }
})

效果

如下图所示，在一份医疗健康图谱中，通过智能布局预测引擎得出 "Force" 的布局效果最佳，通过对比实验，也符合预期。

Demo

具体 Demo 参考这里：AI 智能布局推荐 DEMO