Fruchterman

阅读时间约 1 分钟
Fruchterman 布局是一种力导布局。算法原文: Graph Drawing by Force-directed Placement
img
const graph = new F6.Graph({
  ...
  width: 1000,
  height: 600,
  layout: {
    type: 'fruchterman',
    center: [200, 200], // 可选,默认为图的中心
    gravity: 20, // 可选
    speed: 2, // 可选
    clustering: true, // 可选
    clusterGravity: 30, // 可选
    maxIteration: 2000, // 可选,迭代次数
    workerEnabled: true, // 可选,开启 web-worker
    gpuEnabled: true, // 可选,开启 GPU 并行计算,F6 4.0 支持
  },
});

layoutCfg.center

类型: Array
示例:[ 0, 0 ]
默认值:图的中心
是否必须:false
说明:布局的中心

layoutCfg.maxIteration

类型: Number
默认值:1000
是否必须:false
说明:最大迭代次数

layoutCfg.gravity

类型: Number
默认值:10
是否必须:false
说明:重力的大小,影响布局的紧凑程度

layoutCfg.speed

类型: Number
默认值:1
是否必须:false
说明:每次迭代节点移动的速度。速度太快可能会导致强烈震荡

layoutCfg.clustering

类型: Boolean
默认值:false
是否必须:false
说明:是否按照聚类布局

layoutCfg.clusterGravity

类型: Number
默认值:10
是否必须:false
说明:聚类内部的重力大小,影响聚类的紧凑程度,在 clusteringtrue 时生效

layoutCfg.workerEnabled

类型: Boolean
默认值: false
是否必须: false
说明: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互

layoutCfg.gpuEnabled

类型: Boolean
默认值: false
是否必须: false
说明: 是否启用 GPU 并行计算。若用户的机器或浏览器不支持 GPU 计算,将会自动降级为 CPU 计算。性能提升概览: