g6/packages/site/docs/apis/layout/GridLayoutOptions.zh.md

119 lines
2.7 KiB
Markdown
Raw Normal View History

---
2023-11-09 17:50:23 +08:00
title: Grid 网格
order: 7
---
本文展示所有网格布局配置项。[格子布局 DEMO](/zh/examples/net/gridLayout/#grid)。
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8RYVTrENVCcAAAAAAAAAAAAADmJ7AQ/original" width=400 />
## begin
**类型**`[number, number]`
**默认值**`[0, 0]`
**是否必须**false
**说明**:网格开始位置(左上角)
## width
**类型**`number`
**默认值**:在 G6 中使用当前容器的宽度作为 `grid` 布局 `width` 的默认值。单独使用此布局时默认值为 `300`
**是否必须**false
**说明**:网格布局的总宽度
## height
**类型**`number`
**默认值**:在 G6 中使用当前容器的高度作为 `grid` 布局 `height` 的默认值。单独使用此布局时默认值为 `300`
**是否必须**false
**说明**:网格布局的总高度
## rows
**类型**`number`
**默认值**`10`
**是否必须**false
**说明**:网格的行数,为 `undefined` 时算法根据节点数量、布局空间、`cols`(若指定)自动计算
## cols
**类型**`number`
**默认值**`undefined`
**是否必须**false
**说明**:网格的列数,为 `undefined` 时算法根据节点数量、布局空间、`rows`(若指定)自动计算
## preventOverlap
**类型**`boolean`
**默认值**`false`
**是否必须**false
**说明**:是否防止重叠,必须配合下面属性 `nodeSize`,只有设置了与当前图节点大小相同的 `nodeSize` 值,才能够有效进行节点重叠的碰撞检测
## nodeSize
2023-11-10 18:43:02 +08:00
**类型**`number` \| `number`[] \| (`model`: `NodeModel`) => `number`
**默认值**:读取节点数据中的 `data.size`,若无则默认值为 `10`
**是否必须**false
**说明**:节点大小(直径)。用于碰撞检测
## preventOverlapPadding
**类型**`number`
**默认值**`10`
**是否必须**false
**说明**:避免重叠时节点的间距 `padding`。`preventOverlap` 为 `true` 时生效
## condense
**类型**`boolean`
**默认值**`false`
**是否必须**false
**说明**:为 `false` 时表示利用所有可用画布空间,为 `true` 时表示利用最小的画布空间
2023-11-09 17:50:23 +08:00
## position
2023-11-10 18:43:02 +08:00
**类型** (`node?`: `NodeModel`) => { `row?`: `number`; `col?`: `number`; }
**默认值**`undefined`
**是否必须**false
**说明**:指定每个节点所在的行和列
## sortBy
**类型**`string`
**默认值**`undefined`
**是否必须**false
**说明**:指定排序的依据(节点属性名),数值越高则该节点被放置得越中心。若为 undefined则会计算节点的度数度数越高节点将被放置得越中心