G6

Random 随机布局

G6

Random 随机布局

Loading...

概述

随机布局（Random Layout） 是一种基于简单规则的布局方式，其核心逻辑是为每个节点在指定布局区域（由布局中心点、宽度和高度定义）内生成随机坐标（完全随机，无节点防碰撞）。

使用场景

随机布局的使用场景非常局限，只推荐以下场景使用：

数据初步展示:
在开发初期调试数据加载逻辑或需要快速验证数据结构的情况下，可使用随机布局先行验证

业务最终交付推荐使用更能体现业务价值的布局方式，比如 AntVDagreLayout 、ForceLayout 或者自定义布局等。

基本用法

其余均使用默认配置（布局宽高默认是整个画布容器）

const graph = new Graph({
  // 其他配置
  layout: {
    type: 'random',
  },
});

配置项

属性	描述	类型	默认值	必选
type	布局类型	random	-	✓
center	布局的中心	[number, number] \| [number, number, number]	[`布局宽度` / 2, `布局高度` / 2]
height	布局的高度	number	画布高度
width	布局的宽度	number	画布宽度

示例

createGraph(
  {
    autoFit: 'view',
    data: {
      nodes: Array.from({ length: 50 }).map((_, i) => ({
        id: `${i}`,
      })),
    },
    node: {
      style: {
        labelText: (d) => d.id,
      }
    },
    behaviors: ['drag-canvas', 'zoom-canvas'],
    layout: {
      type: 'random'
    },
  },
  { width: 600, height: 300 },
);