---
title: 布局的切换机制
order: 2
---
G6 提供了两种关于布局的切换机制：
- `updateLayout(params)`：布局方法或参数的切换；
- `changeData()`：数据的切换。
## 布局方法或参数切换
**接口定义：**
```javascript
/**
* 更换布局或布局参数
* @param {String | object} cfg 新布局配置项
* 若 cfg 为 String 或含有 type 字段，且与之前的布局方法不同时将会更换布局
* 否则只是更新原有布局的参数
*/
updateLayout(cfg);
```
**布局方法切换：**
若参数 `cfg` 为 `String` 或是含有 `type` 字段的对象，且与之前的布局方法名不同时将会更换布局。
**布局参数切换：**
若参数 `cfg` 是对象且其中不含有 `type` 字段，或指定的布局方法名称与之前的布局方法相同，则保持原有布局方法，仅更新该布局的参数。
## 数据切换
**接口定义：**
```javascript
/**
* 更改源数据，根据新数据重新渲染视图
* @param {object} data 源数据
* @return {object} this
*/
changeData(data);
```
## 切换示例
### 期待效果
初始化时使用默认 random 布局，2000 ms 后更换为允许节点重叠的 force 布局，4000 ms 后更换为不允许节点重叠的 force 布局，6000 ms 后更换数据为 `data2`。
### 完整代码
```html
Tutorial Layout Demo
```