mirror of
https://gitee.com/antv/g6.git
synced 2024-12-03 04:08:32 +08:00
fix: combo animate is not activated with createCombo; (#4570)
* fix: combo animate is not activated with createCombo; * Fix issue#4552, another 404 not found and typo errors (#4554) * fix: Fix the issue#4552 both in en-document and cn-document * fix: Fix the 404 error in "/api/items/combo-methods" and "api/items/node-methods" and "/api/items/edge-methods" The demo URL of these pages is not valid. I added a "#" tag after URL * fix: 文档中此处有错误，将此处的内置节点改为内置combo * fix：文档此处有误，将此处的自定义节点改为自定义边 * fix: layout url (#4529) --------- Co-authored-by: zqqcee <55946653+zqqcee@users.noreply.github.com>
This commit is contained in:
Yanyan Wang
GitHub
parent
be99b93a2c
commit
34f2265030
@ -1,5 +1,10 @@
|
||||
# ChangeLog
|
||||
|
||||
### 4.8.15
|
||||
|
||||
- fix: layout umd url with fixed version instead of latest version;
|
||||
- fix: combo animate is not activated with createCombo;
|
||||
|
||||
### 4.8.14
|
||||
|
||||
- fix: upgrade layout for umd;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/g6-core",
|
||||
"version": "0.8.14",
|
||||
"version": "0.8.15",
|
||||
"description": "A Graph Visualization Framework in JavaScript",
|
||||
"keywords": [
|
||||
"antv",
|
||||
|
||||
@ -64,7 +64,7 @@ const colorSet = {
|
||||
};
|
||||
|
||||
export default {
|
||||
version: '0.8.14',
|
||||
version: '0.8.15',
|
||||
rootContainerClassName: 'root-container',
|
||||
nodeContainerClassName: 'node-container',
|
||||
edgeContainerClassName: 'edge-container',
|
||||
|
||||
@ -1891,6 +1891,10 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
|
||||
if (!comboItem.getModel().parentId && comboItem.getChildren().combos.length) {
|
||||
this.updateComboTree(comboItem, undefined, false);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
comboItem.set('animate', true);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/g6-element",
|
||||
"version": "0.8.14",
|
||||
"version": "0.8.15",
|
||||
"description": "A Graph Visualization Framework in JavaScript",
|
||||
"keywords": [
|
||||
"antv",
|
||||
@ -61,7 +61,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g-base": "^0.5.1",
|
||||
"@antv/g6-core": "0.8.14",
|
||||
"@antv/g6-core": "0.8.15",
|
||||
"@antv/util": "~2.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/g6",
|
||||
"version": "4.8.14",
|
||||
"version": "4.8.15",
|
||||
"description": "A Graph Visualization Framework in JavaScript",
|
||||
"keywords": [
|
||||
"antv",
|
||||
@ -66,7 +66,7 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g6-pc": "0.8.14"
|
||||
"@antv/g6-pc": "0.8.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.7",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import G6 from '@antv/g6-pc';
|
||||
|
||||
G6.version = '4.8.14';
|
||||
G6.version = '4.8.15';
|
||||
|
||||
export * from '@antv/g6-pc';
|
||||
export default G6;
|
||||
export const version = '4.8.14';
|
||||
export const version = '4.8.15';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/g6-pc",
|
||||
"version": "0.8.14",
|
||||
"version": "0.8.15",
|
||||
"description": "A Graph Visualization Framework in JavaScript",
|
||||
"keywords": [
|
||||
"antv",
|
||||
@ -75,9 +75,9 @@
|
||||
"@antv/g-canvas": "^0.5.2",
|
||||
"@antv/g-math": "^0.1.1",
|
||||
"@antv/g-svg": "^0.5.1",
|
||||
"@antv/g6-core": "0.8.14",
|
||||
"@antv/g6-element": "0.8.14",
|
||||
"@antv/g6-plugin": "0.8.14",
|
||||
"@antv/g6-core": "0.8.15",
|
||||
"@antv/g6-element": "0.8.15",
|
||||
"@antv/g6-plugin": "0.8.15",
|
||||
"@antv/hierarchy": "^0.6.10",
|
||||
"@antv/layout": "^0.3.0",
|
||||
"@antv/matrix-util": "^3.1.0-beta.3",
|
||||
|
||||
@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
|
||||
const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
|
||||
|
||||
export default {
|
||||
version: '0.8.14',
|
||||
version: '0.8.15',
|
||||
rootContainerClassName: 'root-container',
|
||||
nodeContainerClassName: 'node-container',
|
||||
edgeContainerClassName: 'edge-container',
|
||||
|
||||
@ -6,7 +6,7 @@ interface Event {
|
||||
}
|
||||
|
||||
export const LayoutWorker = (
|
||||
workerScriptURL: string = 'https://unpkg.com/@antv/layout@latest/dist/layout.min.js',
|
||||
workerScriptURL: string = 'https://unpkg.com/@antv/layout@0.3.22/dist/layout.min.js',
|
||||
) => {
|
||||
function workerCode() {
|
||||
const LAYOUT_MESSAGE = {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/g6-plugin",
|
||||
"version": "0.8.14",
|
||||
"version": "0.8.15",
|
||||
"description": "G6 Plugin",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -22,8 +22,8 @@
|
||||
"@antv/g-base": "^0.5.1",
|
||||
"@antv/g-canvas": "^0.5.2",
|
||||
"@antv/g-svg": "^0.5.2",
|
||||
"@antv/g6-core": "0.8.14",
|
||||
"@antv/g6-element": "0.8.14",
|
||||
"@antv/g6-core": "0.8.15",
|
||||
"@antv/g6-element": "0.8.15",
|
||||
"@antv/matrix-util": "^3.1.0-beta.3",
|
||||
"@antv/scale": "^0.3.4",
|
||||
"@antv/util": "^2.0.9",
|
||||
|
||||
@ -5,6 +5,7 @@ if (window) {
|
||||
(window as any).g6v5 = require('g6v5'); // import the package for webworker
|
||||
(window as any).Algorithm = require('@antv/algorithm'); // import the package for webworker
|
||||
(window as any).Layout = require('@antv/layout-wasm');
|
||||
(window as any).Hierarchy = require('@antv/hierarchy');
|
||||
(window as any).insertCss = require('insert-css');
|
||||
(window as any).Chart = require('@antv/chart-node-g6');
|
||||
(window as any).AntVUtil = require('@antv/util');
|
||||
|
||||
@ -156,6 +156,8 @@ graph.on(timingEventName, evt => {
|
||||
| --- | --- |
|
||||
| beforerender | Emitted before `graph.render` / `graph.read` being called. |
|
||||
| afterrender | Emitted after `graph.render` / `graph.read` being called. |
|
||||
| beforechangedata | Emitted before `graph.changeData` being called. |
|
||||
| afterchangedata | Emitted after `graph.changeData` being called. |
|
||||
| beforeadditem | Emitted before `graph.add` / `graph.addItem` being called. |
|
||||
| afteradditem | Emitted after `graph.add` / `graph.addItem` being called. |
|
||||
| beforeremoveitem | Emitted before `graph.remove` / `graph.removeItem` being called. |
|
||||
|
||||
@ -156,6 +156,8 @@ graph.on(timingEventName, evt => {
|
||||
| --- | --- |
|
||||
| beforerender | 调用 `graph.render` / `graph.read` 方法之前触发 |
|
||||
| afterrender | 调用 `graph.render` / `graph.read` 方法之后触发 |
|
||||
| beforechangedata | 调用 `graph.changeData` 方法之前触发 |
|
||||
| afterchangedata | 调用 `graph.changeData` 方法之后触发 |
|
||||
| beforeadditem | 调用 `graph.add` / `graph.addItem` 方法之前触发 |
|
||||
| afteradditem | 调用 `graph.add` / `graph.addItem` 方法之后触发 |
|
||||
| beforeremoveitem | 调用 `graph.remove` / `graph.removeItem` 方法之前触发 |
|
||||
|
||||
@ -3,7 +3,7 @@ title: combo.*
|
||||
order: 3
|
||||
---
|
||||
|
||||
Combo inherits from Node. The functions of Node are also available for Combo. This document will only introduce the common functions for Combo Class. All the built-in combos can be found in [Built-in Combos Doc](/en/docs/manual/middle/elements/combos/default-combo) and [demo](/en/examples/item/defaultCombos), Custom Combo can be found in [Custom Combo Doc](/en/docs/manual/middle/elements/combos/custom-combo) and [demo](/en/examples/item/customCombo).
|
||||
Combo inherits from Node. The functions of Node are also available for Combo. This document will only introduce the common functions for Combo Class. All the built-in combos can be found in [Built-in Combos Doc](/en/docs/manual/middle/elements/combos/default-combo) and [demo](/en/examples/item/defaultCombos/#circle), Custom Combo can be found in [Custom Combo Doc](/en/docs/manual/middle/elements/combos/custom-combo) and [demo](/en/examples/item/customCombo/#cCircle).
|
||||
|
||||
### combo.getChildren()
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: combo 实例方法
|
||||
order: 3
|
||||
---
|
||||
|
||||
Combo 继承自 Node，具有 Node 的所有特性。本文仅介绍 Combo 类的通用方法，内置节点见 [内置 Combo 文档](/zh/docs/manual/middle/elements/combos/default-combo) 和 [demo](/zh/examples/item/defaultCombos)，自定义节点见 [自定义 Combo 文档](/zh/docs/manual/middle/elements/combos/custom-combo) 和 [demo](/zh/examples/item/customCombo)。
|
||||
Combo 继承自 Node，具有 Node 的所有特性。本文仅介绍 Combo 类的通用方法，内置Combo见 [内置 Combo 文档](/zh/docs/manual/middle/elements/combos/default-combo) 和 [demo](/zh/examples/item/defaultCombos/#circle)，自定义Combo见 [自定义 Combo 文档](/zh/docs/manual/middle/elements/combos/custom-combo) 和 [demo](/zh/examples/item/customCombo/#cCircle)。
|
||||
|
||||
### combo.getChildren()
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: edge.*
|
||||
order: 2
|
||||
---
|
||||
|
||||
Edge inherits from item. The functions of Item are also available for Edge. This document will only introduce the common functions for Edge class. All the built-in edges can be found in [Built-in Edges Doc](/en/docs/manual/middle/elements/edges/defaultEdge) and [demo](/en/examples/item/defaultEdges), Custom Edge can be found in [Custom Edge Doc](/en/docs/manual/middle/elements/edges/custom-edge) and [demo](/en/examples/item/customEdge).
|
||||
Edge inherits from item. The functions of Item are also available for Edge. This document will only introduce the common functions for Edge class. All the built-in edges can be found in [Built-in Edges Doc](/en/docs/manual/middle/elements/edges/defaultEdge) and [demo](/en/examples/item/defaultEdges/#polyline1), Custom Edge can be found in [Custom Edge Doc](/en/docs/manual/middle/elements/edges/custom-edge) and [demo](/en/examples/item/customEdge/#extraShape).
|
||||
|
||||
### edge.setSource(source)
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: edge 实例方法
|
||||
order: 2
|
||||
---
|
||||
|
||||
Edge 继承自 Item。所以 Item 的方法在 Edge 实例中都可以使用。本文仅介绍 Edge 类的通用方法，内置边见 [内置边文档](/zh/docs/manual/middle/elements/edges/defaultEdge) 和 [demo](/zh/examples/item/defaultEdges)，自定义节点见 [自定义边文档](/zh/docs/manual/middle/elements/edges/custom-edge) 和 [demo](/zh/examples/item/customEdge)。
|
||||
Edge 继承自 Item。所以 Item 的方法在 Edge 实例中都可以使用。本文仅介绍 Edge 类的通用方法，内置边见 [内置边文档](/zh/docs/manual/middle/elements/edges/defaultEdge) 和 [demo](/zh/examples/item/defaultEdges/#polyline1)，自定义边见 [自定义边文档](/zh/docs/manual/middle/elements/edges/custom-edge) 和 [demo](/zh/examples/item/customEdge/#extraShape)。
|
||||
|
||||
### edge.setSource(source)
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: node.*
|
||||
order: 1
|
||||
---
|
||||
|
||||
Node inherits from item. The functions of Item are also available for Node. This document will only introduce the common functions for Node class. All the built-in nodes can be found in [Built-in Nodes Doc](/en/docs/manual/middle/elements/nodes/default-node) and [demo](/en/examples/item/defaultNodes), Custom Node can be found in [Custom Node Doc](/en/docs/manual/middle/elements/nodes/custom-node) and [demo](/en/examples/item/customNode).
|
||||
Node inherits from item. The functions of Item are also available for Node. This document will only introduce the common functions for Node class. All the built-in nodes can be found in [Built-in Nodes Doc](/en/docs/manual/middle/elements/nodes/default-node) and [demo](/en/examples/item/defaultNodes#circle), Custom Node can be found in [Custom Node Doc](/en/docs/manual/middle/elements/nodes/custom-node) and [demo](/en/examples/item/customNode/#card).
|
||||
|
||||
### node.lock()
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: node 实例方法
|
||||
order: 1
|
||||
---
|
||||
|
||||
Node 继承自 Item。所以 Item 上面的方法在 Node 实例中都可以调用。本文仅介绍 Node 类的通用方法，内置节点见 [内置节点文档](/zh/docs/manual/middle/elements/nodes/default-node) 和 [demo](/zh/examples/item/defaultNodes)，自定义节点见 [自定义节点文档](/zh/docs/manual/middle/elements/nodes/custom-node) 和 [demo](/zh/examples/item/customNode)。
|
||||
Node 继承自 Item。所以 Item 上面的方法在 Node 实例中都可以调用。本文仅介绍 Node 类的通用方法，内置节点见 [内置节点文档](/zh/docs/manual/middle/elements/nodes/default-node) 和 [demo](/zh/examples/item/defaultNodes#circle)，自定义节点见 [自定义节点文档](/zh/docs/manual/middle/elements/nodes/custom-node) 和 [demo](zh/examples/item/customNode/#card)。
|
||||
|
||||
### node.lock()
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@ The configurations of each layout algorithms are different. Please refer to corr
|
||||
- If there are `x` and `y` in node data, the graph will render with these information;
|
||||
- If there is no positions information in node data, the graph will arrange nodes with Random Layout by default.
|
||||
|
||||
If the worker is enabled, notice that worker will visit the latest online version of @antv/layout. If your application cannot reach the online resource, download and save the [layout script](https://unpkg.com/@antv/layout@latest/dist/layout.min.js), and put it on an address which is visitable for your application. And then config `workerScriptURL` with the address in `layout`.
|
||||
If the worker is enabled, notice that worker will visit the latest online version of @antv/layout. If your application cannot reach the online resource, download and save the [layout script](https://unpkg.com/@antv/layout@0.3.22/dist/layout.min.js), and put it on an address which is visitable for your application. And then config `workerScriptURL` with the address in `layout`.
|
||||
|
||||
|
||||
## Instantiate Independently
|
||||
|
||||
@ -49,7 +49,7 @@ const graph = new G6.Graph({
|
||||
- 若数据中节点有位置信息（`x` 和 `y`），则按照数据的位置信息进行绘制；
|
||||
- 若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。
|
||||
|
||||
如果开启了 webworker，worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/layout@latest/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可。
|
||||
如果开启了 webworker，worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/layout@0.3.22/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可。
|
||||
|
||||
## 单独使用布局
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Overview of Combos
|
||||
order: 0
|
||||
---
|
||||
|
||||
> Node Combo is a new feature for V3.5. The [node group](/en/docs/manual/middle/elements/shape/graphics-group) will be deprecated. We recommend to use Combo for node grouping. <a href='/en/examples/item/defaultCombos' target='_blank'>Demo</a>. <br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*AngFRpOo4SAAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>
|
||||
> Node Combo is a new feature for V3.5. The [node group](/en/docs/manual/middle/elements/shape/graphics-group) will be deprecated. We recommend to use Combo for node grouping. <a href='/en/examples/net/comboLayout#comboCombined' target='_blank'>Demo</a>. <br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*AngFRpOo4SAAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>
|
||||
|
||||
The built-in Combos in G6 include circle and rect types. <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UwaHSKkwoVUAAAAAAAAAAABkARQnAQ' width='250' alt='img'/>
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ order: 0
|
||||
|
||||
> V3.5 后支持的全新节点分组 Combo 机制。[原节点分组](/zh/docs/manual/middle/elements/shape/graphics-group)即将废除。
|
||||
|
||||
对于熟悉图可视化类库的用户来说，节点分组是非常实用的一个功能。此前，G6 已经存在一个节点分组 Node Group 功能，但它的机制无法支持一些较复杂的功能，例如：带有节点分组的图布局、自定义 Combo、嵌套节点分组的均匀 padding、节点与分组的边、分组与分组的边、空的节点分组等。V3.5 推出了全新的节点分组 Combo 机制，能够支持所有常用功能，参考 <a href='/zh/examples/item/defaultCombos' target='_blank'>Demo</a>。 <br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*AngFRpOo4SAAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>
|
||||
对于熟悉图可视化类库的用户来说，节点分组是非常实用的一个功能。此前，G6 已经存在一个节点分组 Node Group 功能，但它的机制无法支持一些较复杂的功能，例如：带有节点分组的图布局、自定义 Combo、嵌套节点分组的均匀 padding、节点与分组的边、分组与分组的边、空的节点分组等。V3.5 推出了全新的节点分组 Combo 机制，能够支持所有常用功能，参考 <a href='/zh/examples/net/comboLayout#comboCombined' target='_blank'>Demo</a>。 <br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*AngFRpOo4SAAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>
|
||||
|
||||
G6 的内置 Combo 包括 circle 和 rect 两种类型，分别如下图所示。<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UwaHSKkwoVUAAAAAAAAAAABkARQnAQ' width='250' alt='img'/>
|
||||
|
||||
|
||||
@ -20,4 +20,4 @@ Note:
|
||||
|
||||
- TreeGraph layouts do not support Web-Worker;
|
||||
- Sub-Graph layout mechanism do not support Web-Worker;
|
||||
- Worker will visit the latest online version of @antv/layout. If your application cannot reach the online resource, download and save the [layout script](https://unpkg.com/@antv/layout@latest/dist/layout.min.js), and put it on an address which is visitable for your application. And then config `workerScriptURL` with the address in `layout`.
|
||||
- Worker will visit the latest online version of @antv/layout. If your application cannot reach the online resource, download and save the [layout script](https://unpkg.com/@antv/layout@0.3.22/dist/layout.min.js), and put it on an address which is visitable for your application. And then config `workerScriptURL` with the address in `layout`.
|
||||
|
||||
@ -21,4 +21,4 @@ const graph = new G6.Graph({
|
||||
|
||||
- 树图不支持 Web-Worker 机制；
|
||||
- 子图布局机制暂不支持 Web-Worker 机制；
|
||||
- worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/layout@latest/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可
|
||||
- worker 使用的是 @antv/layout 线上的脚本，如果你的项目无法访问到线上资源，请保存 [layout 脚本](https://unpkg.com/@antv/layout@0.3.22/dist/layout.min.js)，并放在可以访问到的地址上，将 layout 的 `workerScriptURL` 配置为该地址即可
|
||||
|
||||
@ -484,6 +484,7 @@ graph.on('afteractivaterelations', (e) => {
|
||||
- `onDeselect(nodes)`：取消选中节点时的回调，参数 `nodes` 表示取消选中的节点；
|
||||
- `selectedState`：选中的状态，默认值为 `'selected'`；
|
||||
- `includeEdges`：框选过程中是否选中边，默认为 `true`，用户配置为 `false` 时，则不选中边；
|
||||
- `includeCombos`：框选过程中是否选中 Combo，默认为 `false`，用户配置为 `true` 时，则可选中 Combo；
|
||||
- `trigger`：触发框选的动作，默认为 `'shift'`，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: `'shift'`、`'ctrl' / 'control'`、`'alt'` 和 `'drag'` ，不区分大小写：
|
||||
- `'shift'`：按住 Shift 键进行拖动框选；
|
||||
- `'ctrl' / 'control'`：按住 Ctrl 键进行拖动框选；
|
||||
|
||||
5
packages/site/examples/tree/customLayout/API.en.md
Normal file
5
packages/site/examples/tree/customLayout/API.en.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: API
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/tree-graph-layout/compactBox.en.md"></embed>
|
||||
5
packages/site/examples/tree/customLayout/API.zh.md
Normal file
5
packages/site/examples/tree/customLayout/API.zh.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: API
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/tree-graph-layout/compactBox.zh.md"></embed>
|
||||
@ -0,0 +1,133 @@
|
||||
import G6 from '@antv/g6';
|
||||
import HierarchyLayout from '@antv/hierarchy';
|
||||
|
||||
const Hierarchy = HierarchyLayout || window.Hierarchy;
|
||||
|
||||
|
||||
fetch(
|
||||
"https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json"
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const container = document.getElementById("container");
|
||||
const width = container.scrollWidth;
|
||||
const height = container.scrollHeight || 500;
|
||||
const graph = new G6.TreeGraph({
|
||||
container: "container",
|
||||
width,
|
||||
height,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: "collapse-expand",
|
||||
onChange: function onChange(item, collapsed) {
|
||||
const data = item.getModel();
|
||||
data.collapsed = collapsed;
|
||||
return true;
|
||||
}
|
||||
},
|
||||
"drag-canvas",
|
||||
"zoom-canvas"
|
||||
]
|
||||
},
|
||||
defaultNode: {
|
||||
type: "rect",
|
||||
size: [50, 20],
|
||||
anchorPoints: [
|
||||
[0, 0.5],
|
||||
[1, 0.5]
|
||||
]
|
||||
},
|
||||
defaultEdge: {
|
||||
type: "polyline"
|
||||
},
|
||||
layout: (data) => {
|
||||
let subtree;
|
||||
G6.Util.traverseTree(data, (sub) => {
|
||||
if (sub.id === "Consensus") subtree = sub;
|
||||
});
|
||||
const indentedConfig = {
|
||||
direction: "LR",
|
||||
indent: 80,
|
||||
getHeight: () => {
|
||||
return 10;
|
||||
}
|
||||
};
|
||||
const subtreeLayoutData = Hierarchy["indented"](
|
||||
subtree,
|
||||
indentedConfig
|
||||
);
|
||||
let minY = Infinity;
|
||||
let maxY = -Infinity;
|
||||
G6.Util.traverseTree(subtreeLayoutData, (child) => {
|
||||
if (child.y < minY) minY = child.y;
|
||||
if (child.y > maxY) maxY = child.y;
|
||||
});
|
||||
const height = maxY - minY;
|
||||
|
||||
const config = {
|
||||
direction: "LR",
|
||||
getId: function getId(d) {
|
||||
return d.id;
|
||||
},
|
||||
getHeight: function getHeight(d) {
|
||||
if (d.id === "Consensus") return height + 10;
|
||||
return 16;
|
||||
},
|
||||
getWidth: function getWidth() {
|
||||
return 16;
|
||||
},
|
||||
getVGap: function getVGap(d) {
|
||||
return 10;
|
||||
},
|
||||
getHGap: function getHGap() {
|
||||
return 100;
|
||||
}
|
||||
};
|
||||
const treeLayoutData = Hierarchy["mindmap"](data, config);
|
||||
let x, y;
|
||||
G6.Util.traverseTree(treeLayoutData, (sub) => {
|
||||
if (sub.id === "Consensus") {
|
||||
x = sub.x;
|
||||
y = sub.y;
|
||||
}
|
||||
});
|
||||
G6.Util.traverseTree(subtreeLayoutData, (sub) => {
|
||||
sub.x += x;
|
||||
sub.y += y;
|
||||
});
|
||||
G6.Util.traverseTree(treeLayoutData, (sub) => {
|
||||
sub.children?.forEach((child, i) => {
|
||||
if (child.id === "Consensus") {
|
||||
sub.children.splice(i, 1, subtreeLayoutData);
|
||||
console.log("cild", sub.children);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return treeLayoutData;
|
||||
}
|
||||
});
|
||||
|
||||
graph.node(function (node) {
|
||||
return {
|
||||
label: node.id,
|
||||
labelCfg: {
|
||||
offset: 10,
|
||||
position: node.children && node.children.length > 0 ? "left" : "right"
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.fitView();
|
||||
|
||||
if (typeof window !== "undefined")
|
||||
window.onresize = () => {
|
||||
if (!graph || graph.get("destroyed")) return;
|
||||
if (!container || !container.scrollWidth || !container.scrollHeight)
|
||||
return;
|
||||
graph.changeSize(container.scrollWidth, container.scrollHeight);
|
||||
};
|
||||
});
|
||||
16
packages/site/examples/tree/customLayout/demo/meta.json
Normal file
16
packages/site/examples/tree/customLayout/demo/meta.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"title": {
|
||||
"zh": "中文分类",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "customTreeLayout.js",
|
||||
"title": {
|
||||
"zh": "自定义树图布局",
|
||||
"en": "Custom Tree Layout"
|
||||
},
|
||||
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*w1TnRbLkYVIAAAAAAAAAAAAADmJ7AQ/original"
|
||||
}
|
||||
]
|
||||
}
|
||||
12
packages/site/examples/tree/customLayout/index.en.md
Normal file
12
packages/site/examples/tree/customLayout/index.en.md
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Custom Tree Layout
|
||||
order: 6
|
||||
redirect_from:
|
||||
- /en/examples
|
||||
---
|
||||
|
||||
Custom tree graph layout.
|
||||
|
||||
## Usage
|
||||
|
||||
It is appropriate for integrating several tree layouts or custom positions freely for each nodes, when single tree layout does not meet the requirements.
|
||||
12
packages/site/examples/tree/customLayout/index.zh.md
Normal file
12
packages/site/examples/tree/customLayout/index.zh.md
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: 自定义树图布局
|
||||
order: 6
|
||||
redirect_from:
|
||||
- /zh/examples
|
||||
---
|
||||
|
||||
自定义树图布局。
|
||||
|
||||
## 使用指南
|
||||
|
||||
适用于单个树图布局不满足需求时，可以结合多个树图布局，或完全自定义节点位置，以达到自定义布局的目的。
|
||||
@ -39,6 +39,7 @@
|
||||
"@antv/chart-node-g6": "^0.0.3",
|
||||
"@antv/dumi-theme-antv": "^0.3.0-beta.5",
|
||||
"@antv/g6": "^4.8.7",
|
||||
"@antv/hierarchy": "^0.6.10",
|
||||
"@antv/g6-react-node": "^1.4.5",
|
||||
"@antv/layout-wasm": "^1.3.4",
|
||||
"@antv/util": "^2.0.9",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user