---
title: 使用图布局 Layout
order: 3
---
当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。G6 提供了 9 种一般图的布局和 4 种树图的布局。在 v4 中，它们需要分别使用的图结构数据和树图结构数据中。v5 将树图和图进行了融合，现在不论是树图还是图，都可以使用如下布局算法：
**一般图：**
- Random Layout：随机布局；
- **Force Layout：经典力导向布局：**
> 力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。
- Circular Layout：环形布局；
- Radial Layout：辐射状布局；
- MDS Layout：高维数据降维算法布局；
- Fruchterman Layout：Fruchterman 布局，一种力导布局；
- Dagre Layout：层次布局；
- Concentric Layout：同心圆布局，将重要（默认以度数为度量）的节点放置在布局中心；
- Grid Layout：格子布局，将节点有序（默认是数据顺序）排列在格子上。
**树图布局：**
- Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；
- CompactBox Layout：紧凑树布局；
- Mindmap Layout：脑图布局；
- Indented Layout：缩进布局。
各种布局方法的具体介绍及其配置参见 [Layout API](https://g6-next.antv.antgroup.com/apis/layout/force-layout-options)。本教程中，我们使用的是力导向布局 (Force Layout)。
## 默认布局
当实例化图时没有配置布局时：
- 若数据中节点有位置信息（`x` 和 `y`），则按照数据的位置信息进行绘制；
- 若数据中节点没有位置信息，则默认使用 Grid Layout 进行布局。
## 配置布局
G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 `type: 'force'`，即力导向图布局。同时开启了 `animated: true` 使得在力计算过程中实时渲染图，让用户可以观察到图上节点力相互作用产生的动画效果。并设置了参数 `preventOverlap: true` ，表示希望节点不重叠。力导向布局的更多配置项参见：[Layout API](https://g6-next.antv.antgroup.com/apis/layout/force-layout-options)。
```javascript
const graph = new Graph({
// ... // 其他配置项
// Object，可选，布局的方法及其配置项，默认为 grid 布局。
layout: {
type: 'force', // 指定为力导向布局
preventOverlap: true, // 防止节点重叠
linkDistance: 50, // 边的理想长度
// nodeSize: 30 // 节点大小，用于算法中防止节点重叠时的碰撞检测。默认将使用数据中的节点大小。
},
});
```
结果如下：
> 不同布局之间、相同布局不同参数允许动态切换和过渡，具体参见：[布局切换](https://g6-next.antv.antgroup.com/examples/net/layoutMechanism/#layoutTranslate)。
提示：若图配置中有 data，则在实例化图后进行布局计算。若使用 `graph.read(data)` API 进行数据读取，则将在调用时执行计算。
## 完整代码
至此，完整代码如下：
```html
Tutorial Demo
```
**⚠️ 注意:**
若需更换数据，请替换 `'https://raw.githubusercontent.com/antvis/G6/v5/packages/g6/tests/datasets/force-data.json'` 为新的数据文件地址。