mirror of
https://gitee.com/antv/g6.git
synced 2024-12-02 11:48:29 +08:00
WIP: G6 迁移新官网
This commit is contained in:
zhanning.bzn
parent
3a6d561aba
commit
2d76e10184
@ -76,8 +76,8 @@ G6.registerNode(
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| -------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| edgeName | string | true | 自定义边的名称 |
|
||||
| options | object | true | 自定义边时的配置项，配置项中包括完整的生命周期方法，具体请参考：[Shape 文档](https://www.yuque.com/antv/g6/shape-api)。 |
|
||||
| extendEdgeName | string | false | 自定义边时可基于内置边进行定义，该字段表示内置边的名称，所有内置边请参考：[内置边](https://www.yuque.com/antv/g6/default-node#QtRZ2)。 |
|
||||
| options | object | true | 自定义边时的配置项，配置项中包括完整的生命周期方法，具体请参考：[Shape 文档](/zh/docs/api/Shape)。 |
|
||||
| extendEdgeName | string | false | 自定义边时可基于内置边进行定义，该字段表示内置边的名称，所有内置边请参考：[内置边](/zh/docs/manual/middle/elements/defaultEdge)。 |
|
||||
|
||||
**用法**
|
||||
|
||||
@ -134,7 +134,7 @@ G6.registerEdge(
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| ------------ | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| behaviorName | string | true | 自定义 Behavior 的名称 |
|
||||
| behavior | object | true | 自定义 behavior 时的配置项，配置项中包括的方法及作用具体请参考：[Behavior 文档](https://www.yuque.com/antv/g6/behavior-api)。 |
|
||||
| behavior | object | true | 自定义 behavior 时的配置项，配置项中包括的方法及作用具体请参考：[Behavior 文档](/zh/docs/api/Behavior)。 |
|
||||
|
||||
**用法**
|
||||
|
||||
@ -189,7 +189,7 @@ G6.registerBehavior('behaviorName', {
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| ---------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| layoutName | string | true | 自定义布局名称 |
|
||||
| layout | object | true | 自定义布局的配置项，配置项中包括的方法及作用具体请参考：[Layout 文档](https://www.yuque.com/antv/g6/agbmu2)。 |
|
||||
| layout | object | true | 自定义布局的配置项，配置项中包括的方法及作用具体请参考：[Layout 文档](/zh/docs/manual/middle/layout)。 |
|
||||
|
||||
**用法**
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@ Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销
|
||||
## 初始化
|
||||
### G6.Graph
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| container | String|HTMLElement | 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象 |
|
||||
@ -35,13 +36,14 @@ Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销
|
||||
| maxZoom | Number | 10 | 最大缩放比例 |
|
||||
| pixelRatio | Number | 1.0 | 像素比率 |
|
||||
| groupType | String | circle | 节点分组类型，支持 circle 和 rect |
|
||||
| groupStyle | Object | | groupStyle 用于指定分组的样式，详情参看[文档](https://www.yuque.com/antv/g6/taixri#f283J) |
|
||||
| layout | Object | | 布局配置项，使用 type 字段指定使用的布局方式，type可取以下值：random, radial, mds, circular, fruchterman, force, dagre，各布局详细的配置请参考 [Layout API文档](https://www.yuque.com/antv/g6/agbmu2) |
|
||||
| groupStyle | Object | | groupStyle 用于指定分组的样式，详情参看[文档](/zh/docs/manual/middle/nodeGroupJ) |
|
||||
| layout | Object | | 布局配置项，使用 type 字段指定使用的布局方式，type可取以下值：random, radial, mds, circular, fruchterman, force, dagre，各布局详细的配置请参考 [Layout API文档](/zh/docs/api/layout/Layout) |
|
||||
|
||||
|
||||
**重点说明**: G6 3.1 版本中实例化 Graph 时，新增了 `nodeStateStyles`及 `edgeStateStyles`两个配置项，删除了 `nodeStyle` 和 `edgeStyle` ，使用 3.1 以下版本的同学，只需要将 `nodeStyle` 改成 `nodeStateStyles` ，将 edgeStyle 改成 `edgeStateStyles` ，配置内容保持不变。
|
||||
|
||||
**用法**
|
||||
|
||||
Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
@ -65,11 +67,13 @@ const graph = new G6.Graph({
|
||||
设置图初始化数据。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
nodes: [
|
||||
@ -99,6 +103,7 @@ graph.data(data)
|
||||
根据提供的数据渲染视图。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.render()
|
||||
```
|
||||
@ -107,12 +112,14 @@ graph.render()
|
||||
根据提供的数据渲染组群。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| data | Object | true | 渲染图的数据 |
|
||||
| groupType | string | true | group类型，支持circle、rect |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
nodes: [
|
||||
@ -154,11 +161,13 @@ graph.renderCustomGroup(data, "circle");
|
||||
接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
nodes: [
|
||||
@ -187,12 +196,14 @@ graph.read(data)
|
||||
更新数据源，根据新的数据重新渲染视图。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
nodes: [
|
||||
@ -221,12 +232,14 @@ graph.changeData(data)
|
||||
收起分组，收起分组后，隐藏分组中的所有节点和边，分组外部与分组内节点有连线的则临时连接到分组上面。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| groupId | String | true | 分组ID |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.collapseGroup('groupId')
|
||||
```
|
||||
@ -235,12 +248,14 @@ graph.collapseGroup('groupId')
|
||||
展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| groupId | String | true | 分组ID |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.expandGroup('groupId')
|
||||
```
|
||||
@ -250,12 +265,14 @@ graph.expandGroup('groupId')
|
||||
新增元素。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | true | 元素类型，可选值为 node、edge 和group |
|
||||
| model | Object | true | 元素的数据模型，type = group 时，参看[这里](https://www.yuque.com/antv/g6/taixri#h8q8H) |
|
||||
| model | Object | true | 元素的数据模型，type = group 时，参看[手动创建节点分组文档](/zh/docs/manual/advanced/create-node-group) |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const model = {
|
||||
id: 'node',
|
||||
@ -291,6 +308,7 @@ graph.addItem('group', model)
|
||||
更新元素，包括更新数据、样式等。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| item | String | Object | true | 元素 ID 或元素实例 |
|
||||
@ -298,6 +316,7 @@ graph.addItem('group', model)
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const model = {
|
||||
id: 'node',
|
||||
@ -322,11 +341,13 @@ graph.updateItem(item, model)
|
||||
new删除元素，当 item 为 group ID 时候，则删除分组。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| item | String | Object | true | 元素ID或元素实例 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 通过ID查询节点实例
|
||||
const item = graph.findById('node')
|
||||
@ -342,6 +363,7 @@ graph.removeItem(item)
|
||||
该方法无参数。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.refresh()
|
||||
```
|
||||
@ -350,12 +372,14 @@ graph.refresh()
|
||||
刷新指定元素。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| item | String | Object | true | 元素ID或元素实例 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 通过ID查询节点实例
|
||||
const item = graph.findById('node')
|
||||
@ -379,6 +403,7 @@ graph.refreshPositions()
|
||||
该方法无参数。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const item = e.item;
|
||||
const graph = this.graph;
|
||||
@ -396,12 +421,14 @@ graph.setAutoPaint(autoPaint);
|
||||
设置是否在更新/删除后自动重绘，一般搭配 `paint()` 方法使用。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| auto | Boolean | true | 是否自动重绘 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const item = e.item;
|
||||
const graph = this.graph;
|
||||
@ -417,12 +444,13 @@ graph.setAutoPaint(autoPaint);
|
||||
|
||||
## 布局
|
||||
|
||||
G6 3.1 内置了丰富的布局。关于如何使用 G6 中内置的布局，请参考 [Layout API文档](https://www.yuque.com/antv/g6/agbmu2)。
|
||||
G6 3.1 内置了丰富的布局。关于如何使用 G6 中内置的布局，请参考 [Layout API文档](/zh/docs/api/layout/Layout)。
|
||||
|
||||
### layout()
|
||||
重新以当前配置的属性进行一次布局。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
@ -475,12 +503,14 @@ graph.on('node:dragend', e => {
|
||||
1. 如果参数 `cfg` 中不包含 `type` 字段，则保持原有布局，仅更新布局配置项。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| cfg | Object | true | 新布局配置项 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
@ -515,6 +545,7 @@ graph.updateLayout({
|
||||
该方法无参数。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.clear()
|
||||
```
|
||||
@ -525,6 +556,7 @@ graph.clear()
|
||||
该方法无参数。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.destroy()
|
||||
```
|
||||
@ -534,12 +566,14 @@ graph.destroy()
|
||||
显示指定的元素。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| item | String | Object | true | 元素ID或元素实例 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 通过ID查询节点实例
|
||||
const item = graph.findById('nodeId')
|
||||
@ -553,12 +587,14 @@ graph.showItem('nodeId')
|
||||
隐藏指定元素。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| item | String | Object | true | 元素ID或元素实例 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 通过ID查询节点实例
|
||||
const item = graph.findById('nodeId')
|
||||
@ -574,6 +610,7 @@ graph.hideItem('nodeId')
|
||||
该方法在执行过程中会触发`beforitemstatechange`，`afteritemstatechange`事件。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| item | String | Object | true | 元素 ID 或元素实例 |
|
||||
@ -581,6 +618,7 @@ graph.hideItem('nodeId')
|
||||
| enabled | Boolean | true | 是否启用状态 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.setItemState('node1', 'selected', true);
|
||||
```
|
||||
@ -589,6 +627,7 @@ graph.setItemState('node1', 'selected', true);
|
||||
清除元素状态，可以一次性清除多个状态。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| item | String | Object | true | 元素 ID 或元素实例 |
|
||||
@ -596,6 +635,7 @@ graph.setItemState('node1', 'selected', true);
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 清除单个状态
|
||||
graph.clearItemStates(node, 'a');
|
||||
@ -613,11 +653,13 @@ graph.clearItemStates(node);
|
||||
提示：该方法必须**在 render 之前调用**，否则不起作用。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| nodeFn | Function | true | 指定每个节点样式 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.node((node) => {
|
||||
return {
|
||||
@ -639,11 +681,13 @@ graph.render()
|
||||
提示：该方法必须**在 render 之前调用**，否则不起作用。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| edgeFn | Function | true | 指定每条边的样式 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.edge((edge) => {
|
||||
return {
|
||||
@ -664,6 +708,7 @@ graph.render()
|
||||
新增行为，将单个或多个行为添加到单个或多个模式中。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| behaviors | String | Array | true | 添加的行为的名称 |
|
||||
@ -671,6 +716,7 @@ graph.render()
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 将单个Behavior添加到单个模式（默认的default模式）中
|
||||
graph.addBehaviors('click-select', 'default');
|
||||
@ -689,6 +735,7 @@ graph.addBehaviors([ 'brush-select', 'click-select' ], ['default', 'select']);
|
||||
移除行为，将单个或多个行为从单个或多个模式中去除。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| behaviors | String | Array | true | 删除的行为的名称 |
|
||||
@ -696,6 +743,7 @@ graph.addBehaviors([ 'brush-select', 'click-select' ], ['default', 'select']);
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 从单个模式中移除单个Behavior
|
||||
graph.removeBehaviors('click-select', 'default');
|
||||
@ -714,11 +762,13 @@ graph.removeBehaviors([ 'brush-select', 'click-select' ], ['default', 'select'])
|
||||
切换图行为模式。主要用于不同模式下的行为切换，如从编辑模式下切换到只读模式。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| mode | String | true | 模式的名称 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
@ -745,6 +795,7 @@ graph.setMode('custom')
|
||||
- 返回值表示当前的行为模式。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 返回值mode表示当前的行为模式
|
||||
const mode = graph.getCurrentMode()
|
||||
@ -761,6 +812,7 @@ const mode = graph.getCurrentMode()
|
||||
- 返回值表示当前视口的缩放比例， 默认值为 1。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 返回值zoom表示当前视口的缩放比例
|
||||
const zoom = graph.getZoom()
|
||||
@ -770,12 +822,14 @@ const zoom = graph.getZoom()
|
||||
改变视口的缩放比例，在当前画布比例下缩放，是相对比例。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| ratio | Number | true | 缩放比例 |
|
||||
| center | Object | false | 以 center 的 x、y 坐标为中心缩放，如果省略了 center 参数，则以元素当前位置为中心缩放 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 以(100, 100)为中心点，放大3倍
|
||||
graph.zoom(3, { x: 100, y: 100 });
|
||||
@ -788,6 +842,7 @@ graph.zoom(0.5)
|
||||
缩放视窗窗口到一个固定比例。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| toRatio | Number | true | 固定比例值 |
|
||||
@ -795,6 +850,7 @@ graph.zoom(0.5)
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 以(100, 100)为中心点，放大3倍
|
||||
graph.zoomTo(3, { x: 100, y: 100 });
|
||||
@ -807,12 +863,14 @@ graph.zoomTo(0.5)
|
||||
将元素移动到视口中心，该方法可用于做搜索后的缓动动画。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| item | String | Object | true | 元素 ID 或元素实例 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.focusItem(item)
|
||||
```
|
||||
@ -821,6 +879,7 @@ graph.focusItem(item)
|
||||
改变画布大小。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| width | Number | true | 画布宽度 |
|
||||
@ -828,6 +887,7 @@ graph.focusItem(item)
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.changeSize(600, 350)
|
||||
```
|
||||
@ -836,6 +896,7 @@ graph.changeSize(600, 350)
|
||||
采用**相对位移**来平移画布。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| dx | Number | true | 水平方向位移 |
|
||||
@ -843,6 +904,7 @@ graph.changeSize(600, 350)
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.translate(100, 100);
|
||||
```
|
||||
@ -851,6 +913,7 @@ graph.translate(100, 100);
|
||||
采用**绝对位移**将画布移动到指定坐标。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| x | Number | true | 水平方向坐标 |
|
||||
@ -858,6 +921,7 @@ graph.translate(100, 100);
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.moveTo(200, 300)
|
||||
```
|
||||
@ -866,12 +930,14 @@ graph.moveTo(200, 300)
|
||||
让画布内容适应视口。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| padding | Number | Array | false | [top, right, bottom, left] 四个方向上的间距值 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// padding只设置为一个值，则表示top = right = bottom = left = 20
|
||||
graph.fitView(20)
|
||||
@ -891,6 +957,7 @@ graph.fitView([20, 10, 20, 15])
|
||||
根据具体规则查找单个元素。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | true | 元素类型，可选值为 node、edge |
|
||||
@ -903,6 +970,7 @@ graph.fitView([20, 10, 20, 15])
|
||||
- 如果有符合规则的元素实例，则返回第一个匹配的元素实例，否则返回 `undefined` 。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const findNode = graph.find('node', node => {
|
||||
return node.get('model').x === 100;
|
||||
@ -913,6 +981,7 @@ const findNode = graph.find('node', node => {
|
||||
根据 ID，查询对应的元素实例。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| id | String | true | 元素 ID |
|
||||
@ -924,6 +993,7 @@ const findNode = graph.find('node', node => {
|
||||
- 如果有符合规则的元素实例，则返回该元素实例，否则返回 `undefined`。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const node = graph.findById('node')
|
||||
```
|
||||
@ -932,6 +1002,7 @@ const node = graph.findById('node')
|
||||
查询所有满足规则的元素。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | true | 元素类型，可选值为 node、edge |
|
||||
@ -944,6 +1015,7 @@ const node = graph.findById('node')
|
||||
- 如果有符合规则的元素实例，则返回所有元素实例，否则返回 `undefined`。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const nodes = graph.findAll('node', node => {
|
||||
return node.get('model').x;
|
||||
@ -954,6 +1026,7 @@ const nodes = graph.findAll('node', node => {
|
||||
查找所有处于指定状态的元素。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | true | 元素类型，可选值为 node、edge |
|
||||
@ -966,6 +1039,7 @@ const nodes = graph.findAll('node', node => {
|
||||
- 返回所有指定状态的元素实例。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 查询所有选中的元素
|
||||
const nodes = graph.findAllByState('node', 'selected');
|
||||
@ -990,6 +1064,7 @@ const nodes = graph.findAllByState('node', 'selected');
|
||||
```
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.save()
|
||||
```
|
||||
@ -1005,6 +1080,7 @@ graph.save()
|
||||
- 返回值表示图中所有节点的实例。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const nodes = graph.getNodes()
|
||||
```
|
||||
@ -1020,16 +1096,21 @@ const nodes = graph.getNodes()
|
||||
- 返回值表示图中所有边的实例。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const edges = graph.getEdges()
|
||||
```
|
||||
|
||||
## 坐标转换
|
||||
这部分主要是说明视口坐标、Canvas 坐标和页面坐标之前的相互转换。其中视口坐标和 Canvas 坐标的示意图如下所示。<br />
|
||||
这部分主要是说明视口坐标、Canvas 坐标和页面坐标之前的相互转换。其中视口坐标和 Canvas 坐标的示意图如下所示。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*loahSq940hMAAAAAAAAAAABkARQnAQ' width=565 />
|
||||
|
||||
### getPointByClient(clientX, clientY)
|
||||
将屏幕/页面坐标转换为视口坐标。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| clientX | Number | true | 屏幕 x 坐标 |
|
||||
@ -1042,6 +1123,7 @@ const edges = graph.getEdges()
|
||||
- 包含的属性：x 和 y 属性，分别表示视口的 x 、y 坐标。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const point = graph.getPointByClient(e.clientX, e.clientY);
|
||||
console.log('视口x/y坐标分别为:', point.x, point.y)
|
||||
@ -1051,6 +1133,7 @@ console.log('视口x/y坐标分别为:', point.x, point.y)
|
||||
将视口坐标转换为屏幕/页面坐标。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| x | Number | true | 视口 x 坐标 |
|
||||
@ -1063,6 +1146,7 @@ console.log('视口x/y坐标分别为:', point.x, point.y)
|
||||
- 包含的属性：x 和 y 属性，分别表示屏幕/页面的 x、y 坐标。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const point = graph.getClientByPoint(100, 200);
|
||||
console.log('屏幕/页面x/y坐标分别为:', point.x, point.y)
|
||||
@ -1072,6 +1156,7 @@ console.log('屏幕/页面x/y坐标分别为:', point.x, point.y)
|
||||
将 Canvas 画布坐标转换为视口坐标。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| canvasX | Number | true | 画布x坐标 |
|
||||
@ -1084,6 +1169,7 @@ console.log('屏幕/页面x/y坐标分别为:', point.x, point.y)
|
||||
- 包含的属性：x 和 y 属性，分别表示视口的 x、y 坐标。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const point = graph.getPointByCanvas(100, 200);
|
||||
console.log('视口x/y坐标分别为:', point.x, point.y)
|
||||
@ -1093,6 +1179,7 @@ console.log('视口x/y坐标分别为:', point.x, point.y)
|
||||
将视口坐标转换为 Canvas 画布坐标。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| x | Number | true | 视口 x 坐标 |
|
||||
@ -1105,6 +1192,7 @@ console.log('视口x/y坐标分别为:', point.x, point.y)
|
||||
- 包含的属性：x 和 y 属性，分别表示 Canvas 画布的 x、y 坐标。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const point = graph.getCanvasByPoint(100, 200);
|
||||
console.log('Canvas画布的x/y坐标分别为:', point.x, point.y)
|
||||
@ -1118,6 +1206,7 @@ console.log('Canvas画布的x/y坐标分别为:', point.x, point.y)
|
||||
停止画布上的所有动画。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.stopAnimate()
|
||||
```
|
||||
@ -1130,12 +1219,14 @@ graph.stopAnimate()
|
||||
添加指定的插件。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| plugin | Object | true | 插件实例 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
import miniMap from '@antv/g6/build/minimap'
|
||||
graph.Plugin(miniMap)
|
||||
@ -1145,12 +1236,14 @@ graph.Plugin(miniMap)
|
||||
移除指定的插件。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| plugin | Object | true | 插件实例 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
import miniMap from '@antv/g6/build/minimap'
|
||||
graph.removePlugin(miniMap)
|
||||
@ -1160,12 +1253,14 @@ graph.removePlugin(miniMap)
|
||||
根据key获取属性值。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| key | String | true | 属性的键 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 获取group
|
||||
const group = graph.get('group')
|
||||
@ -1181,6 +1276,7 @@ const autoPaint = graph.get('autoPaint')
|
||||
设置属性值。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| key | String | true | 属性的键 |
|
||||
@ -1188,6 +1284,7 @@ const autoPaint = graph.get('autoPaint')
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
// 设置capture值为false
|
||||
graph.set('capture', false)
|
||||
@ -1203,11 +1300,13 @@ graph.set('nodeIdList', [1, 3, 5])
|
||||
将画布上的元素导出为图片。
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | String | true | 图片的名称 |
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
graph.downloadImage()
|
||||
```
|
||||
@ -1221,6 +1320,7 @@ graph.downloadImage()
|
||||
- 返回值表示生成的图片的 URL。
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const dataURL = graph.toDataURL()
|
||||
```
|
||||
|
||||
@ -6,6 +6,7 @@ order: 2
|
||||
TreeGraph是G6专门为树图场景打造的图。TreeGraph继承自Graph。`G6.TreeGraph`与`G6.Graph`最大的区别就是数据结构和内置布局计算。主要出于以下考虑：
|
||||
|
||||
- 数据结构：树图的数据一般是嵌套结构，边的数据隐含在嵌套结构中，并不会特意指定edge。此布局要求数据中一个节点需要有`id`和`children`两个数据项，最精简的数据结构如下所示：
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
id: 'root',
|
||||
@ -32,6 +33,7 @@ const data = {
|
||||
### G6.TreeGraph
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| layout | object | null | **3.0.4 版本开始支持树布局算法配置**。3.0.4 版本之前是 function 形式。建议开发者使用配置形式，操作粒度更细。 |
|
||||
@ -39,6 +41,7 @@ const data = {
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const treeGraph = new G6.TreeGraph({
|
||||
container: 'mountNode',
|
||||
@ -73,6 +76,7 @@ layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式
|
||||
|
||||
|
||||
### 通用配置项
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | string | dendrogram | 布局类型，支持dendrogram、compactBox、mindmap和indeted。 |
|
||||
@ -85,18 +89,20 @@ layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式
|
||||
### dendrogram
|
||||
|
||||
**dendrogram示意图**
|
||||
|
||||
使用`dendrogram`方式布局时，`direction`取不同值时的效果如下所示。
|
||||
|
||||
| LR | RL | H |
|
||||
| --- | --- | --- |
|
||||
| <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909423150-acf04d11-7016-49ae-a888-f90edb96adbd.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> | <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909423566-cca49639-6dab-43d0-bfac-5ed9b9197237.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> | <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909423225-ad3bb9b4-2119-4014-ae98-65e02185e95e.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> |
|
||||
| <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zX7tSLqBvwcAAAAAAAAAAABkARQnAQ' width='230' height='100'> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qVbeR4oq4lYAAAAAAAAAAABkARQnAQ' width='230' height='100'> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*OHetRqedHOkAAAAAAAAAAABkARQnAQ' width='230' height='100'> |
|
||||
|
||||
| TB | BT | V |
|
||||
| --- | --- | --- |
|
||||
| <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909422368-c7b8499f-053b-497f-ad34-f45b8c2a5549.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> | <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909422252-07a6933e-93d8-490e-ae15-ed51e576d69a.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> | <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909422727-f14a4f4c-c326-4f3f-bea5-abae28867835.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> |
|
||||
| <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*P_OETZsj17cAAAAAAAAAAABkARQnAQ' width='230' height='100'> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*n6sFS57g424AAAAAAAAAAABkARQnAQ' width='230' height='100'> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*CyVbQ5q_0_cAAAAAAAAAAABkARQnAQ' width='230' height='100'> |
|
||||
|
||||
|
||||
**dendrogram配置项**
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| nodeSep | number | 20 | 同层次节点之间的间距 |
|
||||
@ -109,18 +115,20 @@ layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式
|
||||
### compactBox
|
||||
|
||||
**compactBox示意图**
|
||||
|
||||
使用`compactBox`方式布局时，`direction`取不同值时的效果如下所示。
|
||||
|
||||
| LR | RL | H |
|
||||
| --- | --- | --- |
|
||||
| <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909250873-b6b156b5-8edc-468c-bd8e-e1336a0c4589.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> | <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909251752-c5fef594-c0d5-4e0f-80e0-50ef0ad030d7.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> | <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909252469-d1429897-cbe0-4d1f-933e-f1da998e5057.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> |
|
||||
| <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*z-ESRoHTpvIAAAAAAAAAAABkARQnAQ' width='230' height='100'> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*AHfiQ7IfWJwAAAAAAAAAAABkARQnAQ' width='230' height='100'> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ygp0RaTxjp8AAAAAAAAAAABkARQnAQ' width='230' height='100'> |
|
||||
|
||||
| TB | BT | V |
|
||||
| --- | --- | --- |
|
||||
| <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909252526-b8936ca5-0c10-475e-a695-c10d6719a9cf.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> | <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909253376-12485bcb-cf79-4036-9e34-9d8310622071.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> | <img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909250963-09c4db6e-5f67-49ea-a0ce-b922ad54548d.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'> |
|
||||
| <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*sj6qSqrBvpIAAAAAAAAAAABkARQnAQ' width='230' height='100'> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*4tDzSpYiq-cAAAAAAAAAAABkARQnAQ' width='230' height='100'> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Mj0WSaTKzSsAAAAAAAAAAABkARQnAQ' width='230' height='100'> |
|
||||
|
||||
|
||||
**compactBox配置项**
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| getId | Function | | 指定节点ID |
|
||||
@ -152,6 +160,7 @@ layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式
|
||||
### indented
|
||||
|
||||
**indented示意图**
|
||||
|
||||
使用`indented`方式布局时，`direction`取不同值时的效果如下所示。
|
||||
|
||||
| LR | RL | H |
|
||||
@ -160,6 +169,7 @@ layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式
|
||||
|
||||
|
||||
**indented配置项**
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| indent | number | 20 | 与直接父节点的缩进值 |
|
||||
@ -170,10 +180,11 @@ layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式
|
||||
### mindmap
|
||||
|
||||
**mindmap示意图**
|
||||
<img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560908396116-af8c9bf3-ec9b-4a06-b32a-9c6be6ee927c.png#align=left&display=inline&height=327&name=image.png&originHeight=654&originWidth=1276&size=112648&status=done&width=638' width='750'>
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*J1l5RofvbP0AAAAAAAAAAABkARQnAQ' width='750'>
|
||||
|
||||
**mindmap配置项**
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| getId | Function | | 指定节点ID |
|
||||
@ -190,8 +201,8 @@ layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式
|
||||
### addChild(data, parent)
|
||||
在指定的父节点下添加子树。
|
||||
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| data | object | true | 子树的数据 |
|
||||
@ -199,6 +210,7 @@ layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
id: 'sub1',
|
||||
@ -217,12 +229,12 @@ const data = {
|
||||
treeGraph.addChild(data, 'root')
|
||||
```
|
||||
|
||||
|
||||
### updateChild(data, parent)
|
||||
更新数据，差量更新子树。
|
||||
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| data | object | true | 子树的数据 |
|
||||
@ -230,8 +242,8 @@ treeGraph.addChild(data, 'root')
|
||||
|
||||
⚠️**注意：**当parent参数为空时，则全量更新。
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
id: 'sub1',
|
||||
@ -250,18 +262,19 @@ const data = {
|
||||
treeGraph.updateChild(data, 'root')
|
||||
```
|
||||
|
||||
|
||||
### removeChild(id)
|
||||
删除指定的子树。
|
||||
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| id | string | true | 要删除的子树的ID |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
treeGraph.removeChild('sub')
|
||||
```
|
||||
@ -274,12 +287,14 @@ treeGraph.removeChild('sub')
|
||||
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| layout | object | false | 指定的布局配置，如不传，则不做变更 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const layout = {
|
||||
type: 'mindmap',
|
||||
@ -298,12 +313,14 @@ treeGraph.changeLayout(layout)
|
||||
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| fitView | boolean | false | 更新布局后，是否需要自适应窗口 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
treeGraph.refreshLayout(true)
|
||||
```
|
||||
@ -316,6 +333,7 @@ treeGraph.refreshLayout(true)
|
||||
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| id | string | true | 指定的元素ID |
|
||||
@ -329,6 +347,7 @@ treeGraph.refreshLayout(true)
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const target = {
|
||||
id: 'sub1',
|
||||
|
||||
558
docs/api/layout/Graph.zh.md
Normal file
558
docs/api/layout/Graph.zh.md
Normal file
@ -0,0 +1,558 @@
|
||||
---
|
||||
title: Graph Layout
|
||||
order: 1
|
||||
---
|
||||
## Random
|
||||
|
||||
Random 布局是 G6 中的默认布局方法。当实例化图时没有指定布局方法，且数据中也不存在位置信息时，G6 将自动使用 Random 布局。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*G5_uRodUTaYAAAAAAAAAAABkARQnAQ' width=430 />
|
||||
|
||||
### 属性
|
||||
#### center
|
||||
**类型**： Array<br />**示例**：[ 0, 0 ]<br />**默认值**：图的中心<br />**是否必须**：false<br />**说明**：布局的中心
|
||||
|
||||
#### width
|
||||
**类型**： Number<br />**默认值**：图的宽度<br />**是否必须**：false<br />**说明**：布局的宽度范围
|
||||
|
||||
#### height
|
||||
**类型**： Number<br />**默认值**：图的高度<br />**是否必须**：false<br />**说明**：布局的高度范围
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Random 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'random',
|
||||
width: 300,
|
||||
height: 300
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## MDS
|
||||
|
||||
MDS 布局是高维数据降维算法布局，该算法全称 Multidimensional scaling 。<br />
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*aUS7TJR2NHcAAAAAAAAAAABkARQnAQ' width=600 />
|
||||
|
||||
### 属性
|
||||
#### center
|
||||
**类型**： Array<br />**示例**：[ 0, 0 ]<br />**默认值**：图的中心<br />**是否必须**：false<br />**说明**：布局的中心
|
||||
|
||||
#### linkDistance
|
||||
**类型**： Number<br />**默认值**：50<br />**是否必须**：false<br />**说明**：边长度
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Random 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'mds'
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Force
|
||||
|
||||
Force 布局经典的力导向布局方法，与 d3 的力导向布局方法相对应。其属性也与 d3 的力道布局参数相对应。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nt45Q6nnK2wAAAAAAAAAAABkARQnAQ' width=600 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### center
|
||||
**类型**： Array<br />**示例**：[ 0, 0 ]<br />**默认值**：图的中心<br />**是否必须**：false<br />**说明**：布局的中心
|
||||
|
||||
|
||||
#### linkDistance
|
||||
**类型**： Number<br />**默认值**：50<br />**是否必须**：false<br />**说明**：边长度
|
||||
|
||||
|
||||
#### nodeStrength
|
||||
**类型**： Number<br />**默认值**：null<br />**是否必须**：false<br />**说明**：节点作用力，正数代表节点之间的引力作用，负数代表节点之间的斥力作用
|
||||
|
||||
|
||||
#### edgeStrength
|
||||
**类型**：Number<br />**默认值**：null<br />**是否必须**：false<br />**说明**：边的作用力，默认根据节点的出入度自适应
|
||||
|
||||
|
||||
#### collideStrength
|
||||
**类型**：Number<br />**默认值**：1<br />**是否必须**：false<br />**说明**：防止重叠的力强度，范围 [0, 1]
|
||||
|
||||
|
||||
#### nodeSize
|
||||
**类型**： Number<br />**默认值**：10<br />**是否必须**：false<br />**说明**：节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点的 size 属性计算。若即不指定，即节点中也没有 `size`，则默认大小为 10
|
||||
|
||||
|
||||
#### alpha
|
||||
**类型**：Number<br />**默认值**：0.3<br />**是否必须**：false<br />**说明**：当前的迭代收敛阈值
|
||||
|
||||
|
||||
#### alphaDecay
|
||||
**类型**：Number<br />**默认值**：0.028<br />**是否必须**：false<br />**说明**：迭代阈值的衰减率。[0, 1]，0.028 对应迭代书为 300
|
||||
|
||||
|
||||
#### alphaMin
|
||||
**类型**：Number<br />**默认值**：0.001<br />**是否必须**：false<br />**说明**：停止迭代的阈值
|
||||
|
||||
|
||||
#### forceSimulation
|
||||
**类型**：Object<br />**默认值**：null<br />**是否必须**：false<br />**说明**：自定义 force 方法，若不指定，则使用 d3 的方法
|
||||
|
||||
|
||||
#### onTick
|
||||
**类型**：Function<br />**默认值**：{}<br />**是否必须**：false<br />**说明**：每一次迭代的回调函数
|
||||
|
||||
|
||||
#### onLayoutEnd
|
||||
**类型**：Function<br />**默认值**：{}<br />**是否必须**：false<br />**说明**：布局完成后的回调函数
|
||||
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Random 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'force',
|
||||
center: [ 200, 200 ], // 可选，默认为图的中心
|
||||
linkDistance: 50, // 可选，边长
|
||||
nodeStrength: 30, // 可选
|
||||
edgeStrength: 0.1, // 可选
|
||||
collideStrength: 0.8, // 可选
|
||||
nodeSize: 30, // 可选
|
||||
alpha: 0.3, // 可选
|
||||
alphaDecay: 0.028, // 可选
|
||||
alphaMin: 0.01, // 可选
|
||||
forceSimulation: null, // 可选
|
||||
onTick: () => { // 可选
|
||||
console.log('ticking');
|
||||
},
|
||||
onLayoutEnd: () => { // 可选
|
||||
console.log('force layout done');
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Fruchterman
|
||||
|
||||
Fruchterman 布局是一种力导布局。算法原文：[Graph Drawing by Force-directed Placement](http://www.mathe2.uni-bayreuth.de/axel/papers/reingold:graph_drawing_by_force_directed_placement.pdf)。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*jK3ITYqVJnQAAAAAAAAAAABkARQnAQ' width=600 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### center
|
||||
**类型**： Array<br />**示例**：[ 0, 0 ]<br />**默认值**：图的中心<br />**是否必须**：false<br />**说明**：布局的中心
|
||||
|
||||
|
||||
#### maxIteration
|
||||
**类型**： Number<br />**默认值**：1000<br />**是否必须**：false<br />**说明**：最大迭代次数
|
||||
|
||||
|
||||
#### gravity
|
||||
**类型**： Number<br />**默认值**：10<br />**是否必须**：false<br />**说明**：重力的大小，影响布局的紧凑程度
|
||||
|
||||
|
||||
#### speed
|
||||
**类型**： Number<br />**默认值**：1<br />**是否必须**：false<br />**说明**：每次迭代节点移动的速度。速度太快可能会导致强烈震荡
|
||||
|
||||
|
||||
#### clustering
|
||||
**类型**： Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否按照聚类布局
|
||||
|
||||
|
||||
#### clusterGravity
|
||||
**类型**： Number<br />**默认值**：10<br />**是否必须**：false<br />**说明**：聚类内部的重力大小，影响聚类的紧凑程度，在 `clustering` 为 `true` 时生效
|
||||
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Random 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'fruchterman',
|
||||
center: [ 200, 200 ], // 可选，默认为图的中心
|
||||
gravity: 20, // 可选
|
||||
speed: 2, // 可选
|
||||
clustering: true, // 可选
|
||||
clusterGravity: 30, // 可选
|
||||
maxIteration: 2000
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Circular
|
||||
|
||||
Circular 布局将所有节点布局在一个圆环上，可以选择节点在圆环上的排列顺序。可以通过参数的配置扩展出环的分组布局、螺旋形布局等。原文链接：[A framework and algorithms for circular drawings of graphs]()。<br />
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-3idTK1xa6wAAAAAAAAAAABkARQnAQ' width=270 />
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*_nLORItzM5QAAAAAAAAAAABkARQnAQ' width=270 />
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6J6BRIjmXKAAAAAAAAAAAABkARQnAQ' width=270 />
|
||||
|
||||
|
||||
### 属性
|
||||
|
||||
#### center
|
||||
**类型**： Array<br />**示例**：[ 0, 0 ]<br />**默认值**：图的中心<br />**是否必须**：false<br />**说明**：布局的中心
|
||||
|
||||
|
||||
#### radius
|
||||
**类型**： Number<br />**默认值**：null<br />**是否必须**：false<br />**说明**：圆的半径。若设置了 radius，则 startRadius 与 endRadius 不生效
|
||||
|
||||
|
||||
#### startRadius
|
||||
**类型**： Number<br />**默认值**：null<br />**是否必须**：false<br />**说明**：螺旋状布局的起始半径
|
||||
|
||||
|
||||
#### endRadius
|
||||
**类型**：Number<br />**默认值**：null<br />**是否必须**：false<br />**说明**：螺旋状布局的结束半径
|
||||
|
||||
|
||||
#### clockwise
|
||||
**类型**：Boolean<br />**默认值**：true<br />**是否必须**：false<br />**说明**：是否顺时针排列
|
||||
|
||||
|
||||
#### divisions
|
||||
**类型**：Number<br />**默认值**：1<br />**是否必须**：false<br />**说明**：节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效
|
||||
|
||||
|
||||
#### ordering
|
||||
**类型**：String<br />**默认值**：false<br />**可选值**：null | 'topology' | 'degree'<br />**是否必须**：false<br />**说明**：节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序
|
||||
|
||||
|
||||
#### angleRatio
|
||||
**类型**： Number<br />**默认值**：1<br />**是否必须**：false<br />**说明**：从第一个节点到最后节点之间相隔多少个 2*PI
|
||||
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Random 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'circular',
|
||||
center: [ 200, 200 ], // 可选，默认为图的中心
|
||||
radius: null, // 可选
|
||||
startRadius: 10, // 可选
|
||||
endRadius: 100, // 可选
|
||||
clockwise: false, // 可选
|
||||
divisions: 5, // 可选
|
||||
ordering: 'degree', // 可选
|
||||
angleRatio: 1 // 可选
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Radial
|
||||
|
||||
Radial 布局是将图布局成辐射状的布局方法。以一个 focusNode 为中心，其余节点按照与 focusNode 的度数关系排列在不同距离的环上。距离 focusNode 一度的节点布局在与其最近的第一个环上，距离 focusNode 二度的节点布局在第二个环上，以此类推。算法原文链接：[More Flexible Radial Layout](http://emis.ams.org/journals/JGAA/accepted/2011/BrandesPich2011.15.1.pdf)。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GAFjRJeAoAsAAAAAAAAAAABkARQnAQ' width=600 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### center
|
||||
**类型**： Array<br />**示例**：[ 0, 0 ]<br />**默认值**：图的中心<br />**是否必须**：false<br />**说明**：布局的中心
|
||||
|
||||
|
||||
#### linkDistance
|
||||
**类型**： Number<br />**默认值**：50<br />**是否必须**：false<br />**说明**：边长度
|
||||
|
||||
|
||||
#### maxIteration
|
||||
**类型**： Number<br />**默认值**：1000<br />**是否必须**：false<br />**说明**：停止迭代到最大迭代数
|
||||
|
||||
|
||||
#### focusNode
|
||||
**类型**：String | Object<br />**默认值**：null<br />**是否必须**：false<br />**说明**：辐射的中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身
|
||||
|
||||
|
||||
#### unitRadius
|
||||
**类型**：Number<br />**默认值**：100<br />**是否必须**：false<br />**说明**：每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定
|
||||
|
||||
|
||||
#### preventOverlap
|
||||
**类型**：Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否防止重叠，必须配合下面属性 [`nodeSize`](#xWjHN) ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测
|
||||
|
||||
|
||||
#### nodeSize
|
||||
**类型**： Number<br />**默认值**：10<br />**是否必须**：false<br />**说明**：节点大小（直径）。用于防止节点重叠时的碰撞检测
|
||||
|
||||
|
||||
#### maxPreventOverlapIteration
|
||||
**类型**： Number<br />**默认值**：200<br />**是否必须**：false<br />**说明**：防止重叠步骤的最大迭代次数
|
||||
|
||||
|
||||
#### strictRadial
|
||||
**类型**： Boolean<br />**默认值**：true<br />**是否必须**：false<br />**说明**：是否必须是严格的 radial 布局，及每一层的节点严格布局在一个环上。`preventOverlap` 为 `true` 时生效。
|
||||
|
||||
- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `false` 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。
|
||||
- 当 `preventOverlap` 为 `true`，且 `strictRadial` 为 `true` 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cJqbRqm0h2UAAAAAAAAAAABkARQnAQ' width=270 />
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*PFRIRosyX7kAAAAAAAAAAABkARQnAQ' width=270 />
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DPQFSqCXaIAAAAAAAAAAAABkARQnAQ' width=270 />
|
||||
|
||||
> （左）preventOverlap = false。（中）preventOverlap = false，strictRadial = true。（右）preventOverlap = false，strictRadial = false。
|
||||
|
||||
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Concentric 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'circular',
|
||||
center: [ 200, 200 ], // 可选，默认为图的中心
|
||||
linkDistance: 50, // 可选，边长
|
||||
maxIteration: 1000, // 可选
|
||||
focusNode: 'node11', // 可选
|
||||
unitRadius: 100, // 可选
|
||||
preventOverlap: true, // 可选，必须配合 nodeSize
|
||||
nodeSize: 30, // 可选
|
||||
strictRadial: false // 可选
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Dagre
|
||||
|
||||
Dagre 是一种层次布局。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*2uMmRo5wYPUAAAAAAAAAAABkARQnAQ' width=600 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### rankdir
|
||||
**类型**： String<br />**可选值**：'TB' | 'BT' | 'LR' | 'RL'<br />**默认值**：'TB'<br />**是否必须**：false<br />**说明**：布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）。
|
||||
|
||||
- 'TB'：从上至下布局；
|
||||
- 'BT'：从下至上布局；
|
||||
- 'LR'：从左至右布局；
|
||||
- 'RL'：从右至左布局。
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
#### align
|
||||
**类型**： String<br />**可选值**：'UL' | 'UR' | 'DL' | 'DR'<br />**默认值**：'UL'<br />**是否必须**：false<br />**说明**：节点对齐方式。U：upper（上）；D：down（下）；L：left（左）；R：right（右）
|
||||
|
||||
- 'UL'：对齐到左上角；
|
||||
- 'UR'：对齐到右上角；
|
||||
- 'DL'：对齐到左下角；
|
||||
- 'DR'：对齐到右下角。
|
||||
|
||||
|
||||
#### nodesep
|
||||
**类型**： Number<br />**默认值**：50<br />**是否必须**：false<br />**说明**：节点间距（px）
|
||||
|
||||
|
||||
#### ranksep
|
||||
**类型**： Number<br />**默认值**：50<br />**是否必须**：false<br />**说明**：层间距（px）
|
||||
|
||||
|
||||
#### controlPoints
|
||||
**类型**： Boolean<br />**默认值**：true<br />**是否必须**：false<br />**说明**：是否保留布局连线的控制点
|
||||
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Random 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'dagre',
|
||||
rankdir: 'LR', // 可选，默认为图的中心
|
||||
align: 'DL', // 可选
|
||||
nodesep: 20, // 可选
|
||||
ranksep: 50, // 可选
|
||||
controlPoints: true // 可选
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Concentric
|
||||
|
||||
Concentric 布局为同心圆布局，用户可以指定节点某个属性为排序依据（默认为节点度数 degree），该属性值越高，则该节点布局后的位置中心。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*QpyPTbBpO2AAAAAAAAAAAABkARQnAQ' width=600 />
|
||||
|
||||
|
||||
### 属性
|
||||
|
||||
#### center
|
||||
**类型**： Array<br />**示例**：[ 0, 0 ]<br />**默认值**：图的中心<br />**是否必须**：false<br />**说明**：布局的中心
|
||||
|
||||
|
||||
#### preventOverlap
|
||||
**类型**：Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否防止重叠，必须配合下面属性 [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN) ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测
|
||||
|
||||
|
||||
#### nodeSize
|
||||
**类型**： Number<br />**默认值**：30<br />**是否必须**：false<br />**说明**：节点大小（直径）。用于防止节点重叠时的碰撞检测
|
||||
|
||||
|
||||
#### minNodeSpacing
|
||||
**类型**： Number<br />**默认值**：10<br />**是否必须**：false<br />**说明**：环与环之间最小间距，用于调整半径
|
||||
|
||||
|
||||
#### sweep
|
||||
**类型**： Number<br />**默认值**：undefined<br />**是否必须**：false<br />**说明**：第一个节点与最后一个节点之间的弧度差。若为 undefined ，则将会被设置为 2 * Math.PI * (1 - 1 / |level.nodes|) ，其中 level.nodes 为该算法计算出的每一层的节点，|level.nodes| 代表该层节点数量
|
||||
|
||||
|
||||
#### equidistant
|
||||
**类型**： Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：环与环之间的距离是否相等
|
||||
|
||||
|
||||
#### startAngle
|
||||
**类型**： Number<br />**默认值**：3 / 2 * Math.PI<br />**是否必须**：false<br />**说明**：开始方式节点的弧度
|
||||
|
||||
|
||||
#### clockwise
|
||||
**类型**： Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否按照顺时针排列
|
||||
|
||||
|
||||
#### maxLevelDiff
|
||||
**类型**： Number<br />**默认值：**undefined<br />**是否必须**：false<br />**说明**：每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy='degree'，则 maxValue 为所有节点中度数最大的节点的度数
|
||||
|
||||
|
||||
#### sortBy
|
||||
**类型**： String<br />**默认值**：undefined<br />**是否必须**：false<br />**说明**：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心
|
||||
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Random 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'concentric',
|
||||
center: [ 200, 200 ], // 可选，
|
||||
linkDistance: 50, // 可选，边长
|
||||
preventOverlap: true, // 可选，必须配合 nodeSize
|
||||
nodeSize: 30, // 可选
|
||||
sweep: 10, // 可选
|
||||
equidistant: false, // 可选
|
||||
startAngle: 0, // 可选
|
||||
clockwise: false, // 可选
|
||||
maxLevelDiff: 10, // 可选
|
||||
sortBy: 'degree' // 可选
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Grid
|
||||
|
||||
Grid 布局是将所有节点通过某种指定属性排序后，整齐地放置在网格上。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Oh6mRLVEBBIAAAAAAAAAAABkARQnAQ' width=850 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### begin
|
||||
**类型**： Array<br />**示例**：[ 0, 0 ]<br />**默认值**：[ 0, 0 ]<br />**是否必须**：false<br />**说明**：网格开始位置（左上角）
|
||||
|
||||
|
||||
#### preventOverlap
|
||||
**类型**：Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否防止重叠，必须配合下面属性 [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN) ，只有设置了与当前图节点大小相同的 `nodeSize` 值，才能够进行节点重叠的碰撞检测
|
||||
|
||||
|
||||
#### nodeSize
|
||||
**类型**： Number<br />**默认值**：30<br />**是否必须**：false<br />**说明**：节点大小（直径）。用于防止节点重叠时的碰撞检测
|
||||
|
||||
|
||||
#### preventOverlapPadding
|
||||
**类型**：Number<br />**默认值**：10<br />**是否必须**：false<br />**说明**：避免重叠时节点的间距 padding。preventOverlap 为 true 时生效
|
||||
|
||||
|
||||
#### condense
|
||||
**类型**： Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间
|
||||
|
||||
|
||||
#### rows
|
||||
**类型**： Number<br />**默认值**：undefined<br />**是否必须**：false<br />**说明**：网格的行数，为 undefined 时算法根据节点数量、布局空间、cals（若指定）自动计算
|
||||
|
||||
|
||||
#### cols
|
||||
**类型**： Number<br />**默认值**：undefined<br />**是否必须**：false<br />**说明**：网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算
|
||||
|
||||
|
||||
#### sortBy
|
||||
**类型**： String<br />**默认值**：undefined<br />**是否必须**：false<br />**说明**：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心
|
||||
|
||||
|
||||
### 方法
|
||||
与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。
|
||||
|
||||
|
||||
### 使用方法
|
||||
实例化图时配置到 `layout` 中，如果没有配置 `layout` 默认使用 Grid 布局。
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 1000,
|
||||
height: 600,
|
||||
layout: {
|
||||
type: 'concentric',
|
||||
begin: [ 0, 0 ], // 可选，
|
||||
preventOverlap: true, // 可选，必须配合 nodeSize
|
||||
preventOverlapPdding: 20, // 可选
|
||||
nodeSize: 30, // 可选
|
||||
condense: false, // 可选
|
||||
rows: 5, // 可选
|
||||
cols: 5, // 可选
|
||||
sortBy: 'degree' // 可选
|
||||
}
|
||||
);
|
||||
```
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Layout
|
||||
order: 5
|
||||
order: 0
|
||||
---
|
||||
|
||||
在 G6 中使用布局，在实例化图时配置 `layout` 属性。例如：
|
||||
276
docs/api/layout/TreeGraph.zh.md
Normal file
276
docs/api/layout/TreeGraph.zh.md
Normal file
@ -0,0 +1,276 @@
|
||||
---
|
||||
title: TreeGraph
|
||||
order: 2
|
||||
---
|
||||
## CompactBox 紧凑树布局
|
||||
|
||||
紧凑盒树布局。这是树图的默认布局，其特点是布局时统合考虑每个树节点的包围盒，由经典的[Reingold–Tilford tidy布局算法](http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf)演进而来，适合于脑图等应用场景。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*z-ESRoHTpvIAAAAAAAAAAABkARQnAQ' width=850 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### direction
|
||||
**类型**：String<br />**可选值**：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'<br />**默认值**：'LR'<br />**是否必须**：false<br />**说明**：树布局的方向，默认为，其他选项说明
|
||||
|
||||
- TB —— 根节点在上，往下布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*KrAqTrFbNjMAAAAAAAAAAABkARQnAQ' width=150 />
|
||||
|
||||
- BT —— 根节点在下，往上布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*vNmOTJ4q0uwAAAAAAAAAAABkARQnAQ' width=150 />
|
||||
|
||||
- LR —— 根节点在左，往右布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ffD6S74MXw4AAAAAAAAAAABkARQnAQ' width=150 />
|
||||
|
||||
- RL —— 根节点在右，往左布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*vTg2SJbtj_sAAAAAAAAAAABkARQnAQ' width=60 />
|
||||
|
||||
- H —— 根节点在中间，水平对称布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0GsIQISvieYAAAAAAAAAAABkARQnAQ' width=100 />
|
||||
|
||||
- V —— 根节点在中间，垂直对称布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*E0c8TIYRPYoAAAAAAAAAAABkARQnAQ' width=100 />
|
||||
|
||||
|
||||
#### getWidth
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**是否必须**：false<br />**说明**：每个节点的宽度
|
||||
|
||||
|
||||
#### getHeight
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**是否必须**：false<br />**说明**：每个节点的高度
|
||||
|
||||
|
||||
#### getHGap
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**默认值**：18<br />**是否必须**：false<br />**说明**：每个节点的水平间隙
|
||||
|
||||
|
||||
#### getVGap
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**默认值**：18<br />**是否必须**：false<br />**说明**：每个节点的垂直间隙
|
||||
|
||||
|
||||
#### radial
|
||||
**类型**：Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`：
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*E0c8TIYRPYoAAAAAAAAAAABkARQnAQ' width=200 />
|
||||
|
||||
## Dendrogram 生态树布局
|
||||
|
||||
[生态树](https://en.wikipedia.org/wiki/Dendrogram)布局。特点是所有子节点布局在同一层级，适用于表示层次聚类。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zX7tSLqBvwcAAAAAAAAAAABkARQnAQ' width=400 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### direction
|
||||
**类型**：String<br />**可选值**：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'<br />**默认值**：'LR'<br />**是否必须**：false<br />**说明**：树布局的方向，默认为，其他选项说明
|
||||
|
||||
- TB —— 根节点在上，往下布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*krAnRrLTEnEAAAAAAAAAAABkARQnAQ' width=115 />
|
||||
|
||||
- BT —— 根节点在下，往上布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0HRyS64i7QoAAAAAAAAAAABkARQnAQ' width=115 />
|
||||
|
||||
- LR —— 根节点在左，往右布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*T5KZTJdA2OUAAAAAAAAAAABkARQnAQ' width=55 />
|
||||
|
||||
|
||||
- RL —— 根节点在右，往左布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*q7QJQ5RbQ5kAAAAAAAAAAABkARQnAQ' width=55 />
|
||||
|
||||
- H —— 根节点在中间，水平对称布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*tzIfRJ5CuR8AAAAAAAAAAABkARQnAQ' width=85 />
|
||||
|
||||
- V —— 根节点在中间，垂直对称布局
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*B9sjToOzCiAAAAAAAAAAAABkARQnAQ' width=115 />
|
||||
|
||||
|
||||
#### nodeSep
|
||||
**类型**：Number<br />**默认值**：0<br />**是否必须**：false<br />**说明**：节点间距
|
||||
|
||||
|
||||
#### rankSep
|
||||
**类型**：Number<br />**默认值**：0<br />**是否必须**：false<br />**说明**：层与层之间的间距
|
||||
|
||||
|
||||
#### radial
|
||||
**类型**：Boolean<br />**默认值**：false<br />**是否必须**：false<br />**说明**：是否按照辐射状布局。若 `radial` 为 `true`，建议 `direction` 设置为 `'LR'` 或 `'RL'`：
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*AhopQI5j-bcAAAAAAAAAAABkARQnAQ' width=175 />
|
||||
|
||||
## Indented 缩进树布局
|
||||
|
||||
缩进树布局。树节点的层级通过水平方向的缩进量来表示，常用场景是文件目录结构。每个元素会占一行/一列。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NBUzRonaOYMAAAAAAAAAAABkARQnAQ' width=175 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### direction
|
||||
**类型**：String<br />**可选值**：'LR' | 'RL' | 'H'<br />**默认值**：'LR'<br />**是否必须**：false<br />**说明**：树布局的方向，默认为，其他选项说明
|
||||
|
||||
- LR —— 根节点在左，往右布局（下图左）<br />
|
||||
- RL —— 根节点在右，往左布局（下图中）<br />
|
||||
- H —— 根节点在中间，水平对称布局（下图右）
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mq6YSIKrAt0AAAAAAAAAAABkARQnAQ' width=110 />
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VGEnRbpvxlUAAAAAAAAAAABkARQnAQ' width=90 />
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Vek6RqtUXNcAAAAAAAAAAABkARQnAQ' width=160 />
|
||||
|
||||
> （左）LR。（中）RL。（右）H。
|
||||
|
||||
#### indent
|
||||
**类型**：Number<br />**默认值**：20<br />**是否必须**：false<br />**说明**：列间间距
|
||||
|
||||
#### getWidth
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**是否必须**：false<br />**说明**：每个节点的宽度
|
||||
|
||||
#### getHeight
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**是否必须**：false<br />**说明**：每个节点的高度
|
||||
|
||||
#### getSide
|
||||
**类型**：Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 'left'
|
||||
return 'right';
|
||||
}
|
||||
```
|
||||
**是否必须**：false<br />**说明**：节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点。
|
||||
|
||||
## Mindmap 脑图树布局
|
||||
|
||||
深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*J1l5RofvbP0AAAAAAAAAAABkARQnAQ' width=350 />
|
||||
|
||||
### 属性
|
||||
|
||||
#### direction
|
||||
**类型**：String<br />**可选值**：'H' | 'V'<br />**默认值**：'H'<br />**是否必须**：false<br />**说明**：树布局的方向，默认为，其他选项说明
|
||||
|
||||
- H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*J1l5RofvbP0AAAAAAAAAAABkARQnAQ' width=170 />
|
||||
|
||||
- V：vertical （竖直）—— 将根节点的所有孩子纵向排列
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*AD0GTaNT5cQAAAAAAAAAAABkARQnAQ' width=150 />
|
||||
|
||||
#### getWidth
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**是否必须**：false<br />**说明**：每个节点的宽度
|
||||
|
||||
#### getHeight
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**是否必须**：false<br />**说明**：每个节点的高度
|
||||
|
||||
|
||||
#### getHGap
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**默认值**：18<br />**是否必须**：false<br />**说明**：每个节点的水平间隙
|
||||
|
||||
|
||||
#### getVGap
|
||||
**类型**：Number | Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'testId') return 50
|
||||
return 100;
|
||||
}
|
||||
```
|
||||
**默认值**：18<br />**是否必须**：false<br />**说明**：每个节点的垂直间隙
|
||||
|
||||
|
||||
#### getSide
|
||||
**类型**：Function<br />**示例**：
|
||||
```javascript
|
||||
(d) => {
|
||||
// d 是一个节点
|
||||
if (d.id === 'test-child-id') return 'right'
|
||||
return 'left';
|
||||
}
|
||||
```
|
||||
**默认值**：'right'<br />**是否必须**：false<br />**说明**：节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。
|
||||
@ -11,12 +11,14 @@ Edge继承自Item，所以，Item上面的方法在Edge实例中都可以使用
|
||||
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| source | Node | true | 起始节点实例 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const edge = new Edge(
|
||||
{
|
||||
@ -37,12 +39,14 @@ edge.setSource(node)
|
||||
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| target | Node | true | 终止节点实例 |
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const edge = new Edge(
|
||||
{
|
||||
@ -69,6 +73,7 @@ edge.setTarget(node)
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const edge = new Edge(
|
||||
{
|
||||
@ -91,6 +96,7 @@ const node = edge.getSource()
|
||||
|
||||
|
||||
**用法**
|
||||
|
||||
```javascript
|
||||
const edge = new Edge(
|
||||
{
|
||||
|
||||
@ -67,4 +67,5 @@ graph.update(node, {
|
||||
|
||||
通过以上代码修改node中文本的样式，效果如下图：
|
||||
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*euH9SLcS2IoAAAAAAAAAAABkARQnAQ' width=350>
|
||||
|
||||
|
||||
@ -125,6 +125,14 @@ module.exports = {
|
||||
},
|
||||
order: 4
|
||||
},
|
||||
{
|
||||
slug: 'api/layout',
|
||||
title: {
|
||||
zh: 'Layout',
|
||||
en: 'Layout'
|
||||
},
|
||||
order: 4
|
||||
},
|
||||
{
|
||||
slug: 'api/properties',
|
||||
title: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user