From 352b5ba1c64b439820e5f0a2e7672ee463af80a7 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 13 May 2024 10:27:15 +0800 Subject: [PATCH] docs(site): update layout examples (#5728) * refactor: adjust layout api and exports * chore: update deploy actions * docs(site): update layout examples --- .github/workflows/deploy.yml | 10 +- packages/g6/src/exports.ts | 1 + packages/g6/src/runtime/graph.ts | 4 +- packages/g6/src/utils/layout.ts | 4 +- .../layout/arcDiagram/demo/basicArcDiagram.js | 174 ----- .../arcDiagram/demo/circularArcDiagram.js | 135 ---- .../examples/layout/arcDiagram/demo/meta.json | 24 - .../examples/layout/arcDiagram/index.en.md | 11 - .../examples/layout/arcDiagram/index.zh.md | 11 - .../site/examples/layout/circular/API.en.md | 5 - .../site/examples/layout/circular/API.zh.md | 5 - .../examples/layout/circular/demo/basic.js | 25 + .../examples/layout/circular/demo/basic.ts | 403 ----------- .../circular/demo/configurationTranslate.ts | 517 -------------- .../examples/layout/circular/demo/degree.js | 27 + .../examples/layout/circular/demo/degree.ts | 405 ----------- .../examples/layout/circular/demo/division.js | 33 + .../examples/layout/circular/demo/division.ts | 415 ----------- .../examples/layout/circular/demo/meta.json | 20 +- .../examples/layout/circular/demo/spiral.js | 32 + .../examples/layout/circular/demo/spiral.ts | 414 ----------- .../site/examples/layout/circular/index.en.md | 14 +- .../site/examples/layout/circular/index.zh.md | 14 +- .../combo-layout/demo/combo-combined.js | 37 + .../demo/meta.json | 2 +- .../examples/layout/combo-layout/index.en.md | 4 + .../examples/layout/combo-layout/index.zh.md | 4 + .../examples/layout/comboLayout/API.en.md | 11 - .../examples/layout/comboLayout/API.zh.md | 11 - .../layout/comboLayout/demo/comboCombined.ts | 572 --------------- .../examples/layout/comboLayout/index.en.md | 12 - .../examples/layout/comboLayout/index.zh.md | 12 - .../demo/basic.js} | 8 +- .../demo/horizontal.js} | 8 +- .../demo/meta.json | 6 +- .../demo/vertical.js} | 8 +- .../examples/layout/compact-box/index.en.md | 4 + .../examples/layout/compact-box/index.zh.md | 4 + .../site/examples/layout/compactBox/API.en.md | 5 - .../site/examples/layout/compactBox/API.zh.md | 5 - .../examples/layout/compactBox/index.en.md | 12 - .../examples/layout/compactBox/index.zh.md | 12 - .../demo/basic.js} | 1 + .../demo/meta.json | 6 +- .../examples/layout/concentric/index.en.md | 4 + .../examples/layout/concentric/index.zh.md | 4 + .../layout/concentricLayout/API.en.md | 5 - .../layout/concentricLayout/API.zh.md | 5 - .../layout/concentricLayout/index.en.md | 10 - .../layout/concentricLayout/index.zh.md | 10 - .../site/examples/layout/custom/demo/arc.js | 85 +++ .../examples/layout/custom/demo/bi-graph.js | 93 +++ .../examples/layout/custom/demo/meta.json | 24 + .../site/examples/layout/custom/index.en.md | 4 + .../site/examples/layout/custom/index.zh.md | 4 + .../demo/antv-dagre-combo.js} | 60 +- .../demo/antv-dagre.js} | 44 +- .../demo/dagre.ts => dagre/demo/dagre.js} | 4 +- .../{dagreFlow => dagre}/demo/meta.json | 6 +- .../site/examples/layout/dagre/index.en.md | 4 + .../site/examples/layout/dagre/index.zh.md | 4 + .../site/examples/layout/dagreFlow/API.en.md | 5 - .../site/examples/layout/dagreFlow/API.zh.md | 5 - .../examples/layout/dagreFlow/index.en.md | 16 - .../examples/layout/dagreFlow/index.zh.md | 16 - .../site/examples/layout/dendrogram/API.en.md | 5 - .../site/examples/layout/dendrogram/API.zh.md | 5 - .../demo/{basicDendrogram.ts => basic.js} | 22 +- .../examples/layout/dendrogram/demo/meta.json | 10 +- .../layout/dendrogram/demo/tbDendrogram.ts | 46 -- .../layout/dendrogram/demo/vertical.js | 38 + .../examples/layout/dendrogram/index.en.md | 8 - .../examples/layout/dendrogram/index.zh.md | 6 - .../layout/force-directed/demo/3d-force.js | 56 ++ .../demo/atlas2.js} | 1 + .../layout/force-directed/demo/collision.js | 87 +++ .../layout/force-directed/demo/d3-force.js | 30 + .../layout/force-directed/demo/force.js | 31 + .../layout/force-directed/demo/mesh.js | 47 ++ .../layout/force-directed/demo/meta.json | 56 ++ .../layout/force-directed/index.en.md | 4 + .../layout/force-directed/index.zh.md | 4 + .../examples/layout/forceDirected/API.en.md | 5 - .../examples/layout/forceDirected/API.zh.md | 11 - .../layout/forceDirected/demo/basicForce.js | 546 --------------- .../forceDirectedConfigurationTranslate.js | 551 --------------- .../demo/forceDirectedFunctionalParams.js | 65 -- .../layout/forceDirected/demo/meta.json | 40 -- .../examples/layout/forceDirected/index.en.md | 18 - .../examples/layout/forceDirected/index.zh.md | 18 - .../examples/layout/fruchterman/demo/basic.js | 32 + .../layout/fruchterman/demo/cluster.js | 38 + .../demo/meta.json | 18 +- .../demo/run-in-gpu.js} | 13 +- .../fruchterman/demo/run-in-web-worker.js | 43 ++ .../examples/layout/fruchterman/index.en.md | 4 + .../examples/layout/fruchterman/index.zh.md | 4 + .../layout/fruchtermanLayout/API.en.md | 5 - .../layout/fruchtermanLayout/API.zh.md | 5 - .../demo/fruchtermanCluster.ts | 135 ---- .../fruchtermanLayout/demo/fruchtermanFix.ts | 41 -- .../demo/fruchtermanWebWorker.ts | 39 -- .../layout/fruchtermanLayout/index.en.md | 15 - .../layout/fruchtermanLayout/index.zh.md | 15 - .../site/examples/layout/gpuLayout/API.en.md | 5 - .../site/examples/layout/gpuLayout/API.zh.md | 12 - .../layout/gpuLayout/demo/basicFruchterman.ts | 569 --------------- .../layout/gpuLayout/demo/basicGForce.js | 585 ---------------- .../gpuLayout/demo/gForceComplexData.js | 48 -- .../examples/layout/gpuLayout/demo/meta.json | 24 - .../examples/layout/gpuLayout/index.en.md | 13 - .../examples/layout/gpuLayout/index.zh.md | 13 - .../site/examples/layout/grid/demo/basic.js | 40 ++ .../{gridLayout => grid}/demo/meta.json | 2 +- .../site/examples/layout/grid/index.en.md | 4 + .../site/examples/layout/grid/index.zh.md | 4 + .../site/examples/layout/gridLayout/API.en.md | 5 - .../site/examples/layout/gridLayout/API.zh.md | 5 - .../examples/layout/gridLayout/demo/grid.ts | 659 ------------------ .../examples/layout/gridLayout/index.en.md | 13 - .../examples/layout/gridLayout/index.zh.md | 13 - .../site/examples/layout/indented/API.en.md | 5 - .../site/examples/layout/indented/API.zh.md | 5 - .../examples/layout/indented/demo/basic.js | 56 ++ .../layout/indented/demo/filesystem.js | 211 ------ .../layout/indented/demo/graphWithIntended.js | 112 --- .../layout/indented/demo/hIntended.js | 124 ---- .../layout/indented/demo/intendAlignTop.js | 226 ------ .../examples/layout/indented/demo/meta.json | 26 +- .../site/examples/layout/indented/index.en.md | 8 - .../site/examples/layout/indented/index.zh.md | 8 - .../examples/layout/layoutMechanism/API.en.md | 5 - .../examples/layout/layoutMechanism/API.zh.md | 5 - .../layoutMechanism/demo/customBigraph.js | 316 --------- .../layout/layoutMechanism/demo/dataChange.js | 621 ----------------- .../layoutMechanism/demo/layoutTiming.js | 51 -- .../layoutMechanism/demo/layoutTranslate.js | 108 --- .../layout/layoutMechanism/demo/meta.json | 48 -- .../layoutMechanism/demo/subgraphLayout.js | 626 ----------------- .../layoutMechanism/demo/sublayoutPipes.js | 159 ----- .../layout/layoutMechanism/index.en.md | 14 - .../layout/layoutMechanism/index.zh.md | 14 - .../site/examples/layout/mds/demo/basic.js | 32 + .../layout/{mdsLayout => mds}/demo/meta.json | 2 +- packages/site/examples/layout/mds/index.en.md | 4 + packages/site/examples/layout/mds/index.zh.md | 4 + .../site/examples/layout/mdsLayout/API.en.md | 5 - .../site/examples/layout/mdsLayout/API.zh.md | 5 - .../layout/mdsLayout/demo/basicMDS.ts | 599 ---------------- .../examples/layout/mdsLayout/index.en.md | 10 - .../examples/layout/mdsLayout/index.zh.md | 10 - .../layout/mechanism/demo/change-data.js | 44 ++ .../examples/layout/mechanism/demo/meta.json | 24 + .../examples/layout/mechanism/demo/switch.js | 35 + .../examples/layout/mechanism/index.en.md | 4 + .../examples/layout/mechanism/index.zh.md | 4 + .../site/examples/layout/mindmap/API.en.md | 5 - .../site/examples/layout/mindmap/API.zh.md | 5 - .../demo/{hMindmap.ts => auto-side.js} | 19 +- .../{hCustomSideMindmap.ts => custom-side.js} | 19 +- .../demo/{hLeftMindmap.ts => left-side.js} | 17 +- .../examples/layout/mindmap/demo/meta.json | 18 +- .../demo/{hRightMindmap.ts => right-side.js} | 17 +- .../site/examples/layout/mindmap/index.en.md | 8 - .../site/examples/layout/mindmap/index.zh.md | 20 - .../site/examples/layout/radial/demo/basic.js | 29 + .../demo/cluster-sort.js} | 99 +-- .../examples/layout/radial/demo/meta.json | 32 + .../layout/radial/demo/prevent-overlap.js | 36 + .../site/examples/layout/radial/index.en.md | 4 + .../site/examples/layout/radial/index.zh.md | 4 + .../examples/layout/radialLayout/API.en.md | 5 - .../examples/layout/radialLayout/API.zh.md | 5 - .../layout/radialLayout/demo/basic.ts | 406 ----------- .../demo/configurationTranslate.ts | 492 ------------- .../layout/radialLayout/demo/meta.json | 48 -- .../radialLayout/demo/preventOverlap.ts | 416 ----------- .../demo/preventOverlapUnstrict.ts | 416 ----------- .../examples/layout/radialLayout/demo/sort.ts | 466 ------------- .../examples/layout/radialLayout/index.en.md | 17 - .../examples/layout/radialLayout/index.zh.md | 17 - .../site/examples/layout/radialtree/API.en.md | 11 - .../site/examples/layout/radialtree/API.zh.md | 11 - .../examples/layout/radialtree/demo/meta.json | 16 - .../layout/radialtree/demo/radialTree.js | 128 ---- .../examples/layout/radialtree/index.en.md | 12 - .../examples/layout/radialtree/index.zh.md | 12 - 187 files changed, 1432 insertions(+), 12898 deletions(-) delete mode 100644 packages/site/examples/layout/arcDiagram/demo/basicArcDiagram.js delete mode 100644 packages/site/examples/layout/arcDiagram/demo/circularArcDiagram.js delete mode 100644 packages/site/examples/layout/arcDiagram/demo/meta.json delete mode 100644 packages/site/examples/layout/arcDiagram/index.en.md delete mode 100644 packages/site/examples/layout/arcDiagram/index.zh.md delete mode 100644 packages/site/examples/layout/circular/API.en.md delete mode 100644 packages/site/examples/layout/circular/API.zh.md create mode 100644 packages/site/examples/layout/circular/demo/basic.js delete mode 100644 packages/site/examples/layout/circular/demo/basic.ts delete mode 100644 packages/site/examples/layout/circular/demo/configurationTranslate.ts create mode 100644 packages/site/examples/layout/circular/demo/degree.js delete mode 100644 packages/site/examples/layout/circular/demo/degree.ts create mode 100644 packages/site/examples/layout/circular/demo/division.js delete mode 100644 packages/site/examples/layout/circular/demo/division.ts create mode 100644 packages/site/examples/layout/circular/demo/spiral.js delete mode 100644 packages/site/examples/layout/circular/demo/spiral.ts create mode 100644 packages/site/examples/layout/combo-layout/demo/combo-combined.js rename packages/site/examples/layout/{comboLayout => combo-layout}/demo/meta.json (89%) create mode 100644 packages/site/examples/layout/combo-layout/index.en.md create mode 100644 packages/site/examples/layout/combo-layout/index.zh.md delete mode 100644 packages/site/examples/layout/comboLayout/API.en.md delete mode 100644 packages/site/examples/layout/comboLayout/API.zh.md delete mode 100644 packages/site/examples/layout/comboLayout/demo/comboCombined.ts delete mode 100644 packages/site/examples/layout/comboLayout/index.en.md delete mode 100644 packages/site/examples/layout/comboLayout/index.zh.md rename packages/site/examples/layout/{compactBox/demo/basicCompactBox.ts => compact-box/demo/basic.js} (87%) rename packages/site/examples/layout/{compactBox/demo/compactBoxLeftAlign.ts => compact-box/demo/horizontal.js} (89%) rename packages/site/examples/layout/{compactBox => compact-box}/demo/meta.json (85%) rename packages/site/examples/layout/{compactBox/demo/topToBottomCompactBox.ts => compact-box/demo/vertical.js} (89%) create mode 100644 packages/site/examples/layout/compact-box/index.en.md create mode 100644 packages/site/examples/layout/compact-box/index.zh.md delete mode 100644 packages/site/examples/layout/compactBox/API.en.md delete mode 100644 packages/site/examples/layout/compactBox/API.zh.md delete mode 100644 packages/site/examples/layout/compactBox/index.en.md delete mode 100644 packages/site/examples/layout/compactBox/index.zh.md rename packages/site/examples/layout/{concentricLayout/demo/basicConcentric.ts => concentric/demo/basic.js} (97%) rename packages/site/examples/layout/{concentricLayout => concentric}/demo/meta.json (64%) create mode 100644 packages/site/examples/layout/concentric/index.en.md create mode 100644 packages/site/examples/layout/concentric/index.zh.md delete mode 100644 packages/site/examples/layout/concentricLayout/API.en.md delete mode 100644 packages/site/examples/layout/concentricLayout/API.zh.md delete mode 100644 packages/site/examples/layout/concentricLayout/index.en.md delete mode 100644 packages/site/examples/layout/concentricLayout/index.zh.md create mode 100644 packages/site/examples/layout/custom/demo/arc.js create mode 100644 packages/site/examples/layout/custom/demo/bi-graph.js create mode 100644 packages/site/examples/layout/custom/demo/meta.json create mode 100644 packages/site/examples/layout/custom/index.en.md create mode 100644 packages/site/examples/layout/custom/index.zh.md rename packages/site/examples/layout/{dagreFlow/demo/antv-dagre-combo.ts => dagre/demo/antv-dagre-combo.js} (75%) rename packages/site/examples/layout/{dagreFlow/demo/antv-dagre.ts => dagre/demo/antv-dagre.js} (52%) rename packages/site/examples/layout/{dagreFlow/demo/dagre.ts => dagre/demo/dagre.js} (96%) rename packages/site/examples/layout/{dagreFlow => dagre}/demo/meta.json (87%) create mode 100644 packages/site/examples/layout/dagre/index.en.md create mode 100644 packages/site/examples/layout/dagre/index.zh.md delete mode 100644 packages/site/examples/layout/dagreFlow/API.en.md delete mode 100644 packages/site/examples/layout/dagreFlow/API.zh.md delete mode 100644 packages/site/examples/layout/dagreFlow/index.en.md delete mode 100644 packages/site/examples/layout/dagreFlow/index.zh.md delete mode 100644 packages/site/examples/layout/dendrogram/API.en.md delete mode 100644 packages/site/examples/layout/dendrogram/API.zh.md rename packages/site/examples/layout/dendrogram/demo/{basicDendrogram.ts => basic.js} (51%) delete mode 100644 packages/site/examples/layout/dendrogram/demo/tbDendrogram.ts create mode 100644 packages/site/examples/layout/dendrogram/demo/vertical.js create mode 100644 packages/site/examples/layout/force-directed/demo/3d-force.js rename packages/site/examples/layout/{forceDirected/demo/basicFA2.js => force-directed/demo/atlas2.js} (95%) create mode 100644 packages/site/examples/layout/force-directed/demo/collision.js create mode 100644 packages/site/examples/layout/force-directed/demo/d3-force.js create mode 100644 packages/site/examples/layout/force-directed/demo/force.js create mode 100644 packages/site/examples/layout/force-directed/demo/mesh.js create mode 100644 packages/site/examples/layout/force-directed/demo/meta.json create mode 100644 packages/site/examples/layout/force-directed/index.en.md create mode 100644 packages/site/examples/layout/force-directed/index.zh.md delete mode 100644 packages/site/examples/layout/forceDirected/API.en.md delete mode 100644 packages/site/examples/layout/forceDirected/API.zh.md delete mode 100644 packages/site/examples/layout/forceDirected/demo/basicForce.js delete mode 100644 packages/site/examples/layout/forceDirected/demo/forceDirectedConfigurationTranslate.js delete mode 100644 packages/site/examples/layout/forceDirected/demo/forceDirectedFunctionalParams.js delete mode 100644 packages/site/examples/layout/forceDirected/demo/meta.json delete mode 100644 packages/site/examples/layout/forceDirected/index.en.md delete mode 100644 packages/site/examples/layout/forceDirected/index.zh.md create mode 100644 packages/site/examples/layout/fruchterman/demo/basic.js create mode 100644 packages/site/examples/layout/fruchterman/demo/cluster.js rename packages/site/examples/layout/{fruchtermanLayout => fruchterman}/demo/meta.json (65%) rename packages/site/examples/layout/{gpuLayout/demo/fruchtermanComplexData.ts => fruchterman/demo/run-in-gpu.js} (71%) create mode 100644 packages/site/examples/layout/fruchterman/demo/run-in-web-worker.js create mode 100644 packages/site/examples/layout/fruchterman/index.en.md create mode 100644 packages/site/examples/layout/fruchterman/index.zh.md delete mode 100644 packages/site/examples/layout/fruchtermanLayout/API.en.md delete mode 100644 packages/site/examples/layout/fruchtermanLayout/API.zh.md delete mode 100644 packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanCluster.ts delete mode 100644 packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanFix.ts delete mode 100644 packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanWebWorker.ts delete mode 100644 packages/site/examples/layout/fruchtermanLayout/index.en.md delete mode 100644 packages/site/examples/layout/fruchtermanLayout/index.zh.md delete mode 100644 packages/site/examples/layout/gpuLayout/API.en.md delete mode 100644 packages/site/examples/layout/gpuLayout/API.zh.md delete mode 100644 packages/site/examples/layout/gpuLayout/demo/basicFruchterman.ts delete mode 100644 packages/site/examples/layout/gpuLayout/demo/basicGForce.js delete mode 100644 packages/site/examples/layout/gpuLayout/demo/gForceComplexData.js delete mode 100644 packages/site/examples/layout/gpuLayout/demo/meta.json delete mode 100644 packages/site/examples/layout/gpuLayout/index.en.md delete mode 100644 packages/site/examples/layout/gpuLayout/index.zh.md create mode 100644 packages/site/examples/layout/grid/demo/basic.js rename packages/site/examples/layout/{gridLayout => grid}/demo/meta.json (91%) create mode 100644 packages/site/examples/layout/grid/index.en.md create mode 100644 packages/site/examples/layout/grid/index.zh.md delete mode 100644 packages/site/examples/layout/gridLayout/API.en.md delete mode 100644 packages/site/examples/layout/gridLayout/API.zh.md delete mode 100644 packages/site/examples/layout/gridLayout/demo/grid.ts delete mode 100644 packages/site/examples/layout/gridLayout/index.en.md delete mode 100644 packages/site/examples/layout/gridLayout/index.zh.md delete mode 100644 packages/site/examples/layout/indented/API.en.md delete mode 100644 packages/site/examples/layout/indented/API.zh.md create mode 100644 packages/site/examples/layout/indented/demo/basic.js delete mode 100644 packages/site/examples/layout/indented/demo/filesystem.js delete mode 100644 packages/site/examples/layout/indented/demo/graphWithIntended.js delete mode 100644 packages/site/examples/layout/indented/demo/hIntended.js delete mode 100644 packages/site/examples/layout/indented/demo/intendAlignTop.js delete mode 100644 packages/site/examples/layout/layoutMechanism/API.en.md delete mode 100644 packages/site/examples/layout/layoutMechanism/API.zh.md delete mode 100644 packages/site/examples/layout/layoutMechanism/demo/customBigraph.js delete mode 100644 packages/site/examples/layout/layoutMechanism/demo/dataChange.js delete mode 100644 packages/site/examples/layout/layoutMechanism/demo/layoutTiming.js delete mode 100644 packages/site/examples/layout/layoutMechanism/demo/layoutTranslate.js delete mode 100644 packages/site/examples/layout/layoutMechanism/demo/meta.json delete mode 100644 packages/site/examples/layout/layoutMechanism/demo/subgraphLayout.js delete mode 100644 packages/site/examples/layout/layoutMechanism/demo/sublayoutPipes.js delete mode 100644 packages/site/examples/layout/layoutMechanism/index.en.md delete mode 100644 packages/site/examples/layout/layoutMechanism/index.zh.md create mode 100644 packages/site/examples/layout/mds/demo/basic.js rename packages/site/examples/layout/{mdsLayout => mds}/demo/meta.json (90%) create mode 100644 packages/site/examples/layout/mds/index.en.md create mode 100644 packages/site/examples/layout/mds/index.zh.md delete mode 100644 packages/site/examples/layout/mdsLayout/API.en.md delete mode 100644 packages/site/examples/layout/mdsLayout/API.zh.md delete mode 100644 packages/site/examples/layout/mdsLayout/demo/basicMDS.ts delete mode 100644 packages/site/examples/layout/mdsLayout/index.en.md delete mode 100644 packages/site/examples/layout/mdsLayout/index.zh.md create mode 100644 packages/site/examples/layout/mechanism/demo/change-data.js create mode 100644 packages/site/examples/layout/mechanism/demo/meta.json create mode 100644 packages/site/examples/layout/mechanism/demo/switch.js create mode 100644 packages/site/examples/layout/mechanism/index.en.md create mode 100644 packages/site/examples/layout/mechanism/index.zh.md delete mode 100644 packages/site/examples/layout/mindmap/API.en.md delete mode 100644 packages/site/examples/layout/mindmap/API.zh.md rename packages/site/examples/layout/mindmap/demo/{hMindmap.ts => auto-side.js} (74%) rename packages/site/examples/layout/mindmap/demo/{hCustomSideMindmap.ts => custom-side.js} (76%) rename packages/site/examples/layout/mindmap/demo/{hLeftMindmap.ts => left-side.js} (76%) rename packages/site/examples/layout/mindmap/demo/{hRightMindmap.ts => right-side.js} (76%) create mode 100644 packages/site/examples/layout/radial/demo/basic.js rename packages/site/examples/layout/{fruchtermanLayout/demo/basicFruchterman.ts => radial/demo/cluster-sort.js} (60%) create mode 100644 packages/site/examples/layout/radial/demo/meta.json create mode 100644 packages/site/examples/layout/radial/demo/prevent-overlap.js create mode 100644 packages/site/examples/layout/radial/index.en.md create mode 100644 packages/site/examples/layout/radial/index.zh.md delete mode 100644 packages/site/examples/layout/radialLayout/API.en.md delete mode 100644 packages/site/examples/layout/radialLayout/API.zh.md delete mode 100644 packages/site/examples/layout/radialLayout/demo/basic.ts delete mode 100644 packages/site/examples/layout/radialLayout/demo/configurationTranslate.ts delete mode 100644 packages/site/examples/layout/radialLayout/demo/meta.json delete mode 100644 packages/site/examples/layout/radialLayout/demo/preventOverlap.ts delete mode 100644 packages/site/examples/layout/radialLayout/demo/preventOverlapUnstrict.ts delete mode 100644 packages/site/examples/layout/radialLayout/demo/sort.ts delete mode 100644 packages/site/examples/layout/radialLayout/index.en.md delete mode 100644 packages/site/examples/layout/radialLayout/index.zh.md delete mode 100644 packages/site/examples/layout/radialtree/API.en.md delete mode 100644 packages/site/examples/layout/radialtree/API.zh.md delete mode 100644 packages/site/examples/layout/radialtree/demo/meta.json delete mode 100644 packages/site/examples/layout/radialtree/demo/radialTree.js delete mode 100644 packages/site/examples/layout/radialtree/index.en.md delete mode 100644 packages/site/examples/layout/radialtree/index.zh.md diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 63499c1da6..966e4e336c 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -4,7 +4,7 @@ on: workflow_dispatch: push: branches: - - v5 + - v5 jobs: deploy-site: @@ -16,10 +16,14 @@ jobs: node-version: 18 - uses: pnpm/action-setup@v2 with: - version: 8 + version: 8 - uses: actions/checkout@v2 - run: pnpm install - run: npx turbo build + - run: | + cd ./packages/site + pnpm run doc + pnpm run build - run: cp ./packages/site/CNAME ./packages/site/dist/CNAME - run: | cd ./packages/site/dist @@ -33,4 +37,4 @@ jobs: github_token: ${{secrets.PERSONAL_ACCESS_TOKEN}} directory: ./packages/site/dist branch: v5-site - force: true \ No newline at end of file + force: true diff --git a/packages/g6/src/exports.ts b/packages/g6/src/exports.ts index 8bb6a04dda..de343abdb0 100644 --- a/packages/g6/src/exports.ts +++ b/packages/g6/src/exports.ts @@ -79,6 +79,7 @@ export { getExtension, getExtensions, register } from './registry'; export { Graph } from './runtime/graph'; export { BaseTransform } from './transforms'; export { idOf } from './utils/id'; +export { invokeLayoutMethod } from './utils/layout'; export { omitStyleProps, subStyleProps } from './utils/prefix'; export { Shortcut } from './utils/shortcut'; export { parseSize } from './utils/size'; diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts index 8bb4f20c4f..81bba685ab 100644 --- a/packages/g6/src/runtime/graph.ts +++ b/packages/g6/src/runtime/graph.ts @@ -893,8 +893,8 @@ export class Graph extends EventEmitter { * Execute layout * @apiCategory layout */ - public layout() { - this.context.layout!.layout(); + public async layout() { + await this.context.layout!.layout(); } /** diff --git a/packages/g6/src/utils/layout.ts b/packages/g6/src/utils/layout.ts index 1db6a19f39..0b36441db3 100644 --- a/packages/g6/src/utils/layout.ts +++ b/packages/g6/src/utils/layout.ts @@ -203,9 +203,9 @@ export function layoutAdapter( * * Call layout member methods * @description - * 提供一种通用的调用方式来调用 G6 布局和 @antv/layout 布局上的方法 + * 提供一种通用的调用方式来调用 G6 布局和 \@antv/layout 布局上的方法 * - * Provide a common way to call methods on G6 layout and @antv/layout layout + * Provide a common way to call methods on G6 layout and \@antv/layout layout * @param layout - 布局实例 | Layout instance * @param method - 方法名 | Method name * @param args - 参数 | Arguments diff --git a/packages/site/examples/layout/arcDiagram/demo/basicArcDiagram.js b/packages/site/examples/layout/arcDiagram/demo/basicArcDiagram.js deleted file mode 100644 index 9d07e9a980..0000000000 --- a/packages/site/examples/layout/arcDiagram/demo/basicArcDiagram.js +++ /dev/null @@ -1,174 +0,0 @@ -import { Graph, Extensions, extend } from '@antv/g6'; - -const edgeClusterTransform = (dataAUR = {}, options = {}, graphCore) => { - const { dataAdded, dataUpdated, dataRemoved } = dataAUR; - const handler = (data = {}, options = {}, core) => { - const { nodes = [], edges = [] } = data; - const nodeMap = new Map(); - graphCore?.getAllNodes().forEach((node) => nodeMap.set(node.id, node)); - nodes.forEach((node) => nodeMap.set(node.id, node)); - edges.forEach((edge) => { - edge.data.cluster = nodeMap.get(edge.source)?.data.cluster; - }); - return data; - }; - return { - dataAdded: handler(dataAdded, options, graphCore), - dataUpdated: handler(dataUpdated, options, graphCore), - dataRemoved: dataRemoved, - }; -}; -class LineLayout { - // implements Layout<{}> - id = 'line-layout'; - - constructor(options = {}) { - this.options = options; - } - /** - * Return the positions of nodes and edges(if needed). - */ - async execute(graph, options = {}) { - return this.genericLineLayout(false, graph, options); - } - /** - * To directly assign the positions to the nodes. - */ - async assign(graph, options = {}) { - this.genericLineLayout(true, graph, options); - } - - async genericLineLayout(assign, graph, options = {}) { - const { height = 500 } = { ...this.options, ...options }; - - const nodes = graph.getAllNodes(); - const edges = graph.getAllEdges(); - const layoutNodes = []; - let x = 10; - let lastNodeRadius = 0; - nodes.forEach((node, i) => { - const currentRadius = node.data.keyShape?.r || 16; - if (i > 0) { - x = layoutNodes[i - 1].data.x + lastNodeRadius + currentRadius + 4; - } - layoutNodes.push({ - id: node.id, - data: { - x, - y: height * 0.7, - }, - }); - lastNodeRadius = currentRadius; - }); - const result = { - nodes: layoutNodes, - edges, - }; - - if (assign) { - layoutNodes.forEach((node) => { - graph.mergeNodeData(node.id, { - x: node.data.x, - y: node.data.y, - }); - }); - } - return result; - } -} - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -const ExtGraph = extend(Graph, { - edges: { - 'quadratic-edge': Extensions.QuadraticEdge, - }, - transforms: { - 'edge-cluster': edgeClusterTransform, - 'transform-v4-data': Extensions.TransformV4Data, - }, - layouts: { - 'line-layout': LineLayout, - }, -}); - -fetch('https://gw.alipayobjects.com/os/basement_prod/70cde3be-22e8-4291-98f1-4d5a5b75b62f.json') - .then((res) => res.json()) - .then((data) => { - const graph = new ExtGraph({ - container: 'container', - width, - height, - autoFit: 'view', - transforms: ['transform-v4-data', 'edge-cluster'], - plugins: [ - { - type: 'lod-controller', - disableLod: true, - }, - ], - layout: { type: 'line-layout' }, - theme: { - type: 'spec', - specification: { - node: { - dataTypeField: 'cluster', - }, - edge: { - dataTypeField: 'cluster', - }, - }, - }, - node: { - keyShape: { - r: 8, - }, - labelShape: { - text: { - fields: ['name'], - formatter: (model) => model.data.name, - }, - angle: Math.PI / 2, - textAlign: 'left', - offsetX: 10, - maxWidth: 100, - }, - anchorPoints: [[0.5, 0]], - }, - edge: { - type: 'quadratic-edge', - keyShape: { - opacity: 0.4, - }, - }, - modes: { - default: ['click-select', 'drag-canvas', 'drag-node'], - }, - data, - }); - - graph.on('afterlayout', (e) => { - const edgeDatas = graph.getAllEdgesData().map((edge) => { - const { id, source, target } = edge; - const sourceData = graph.getNodeData(source); - const targetData = graph.getNodeData(target); - const [width, height] = graph.getSize(); - const xSep = (width - 20) / graph.getAllNodesData().length; - const endsSepStep = (targetData.data.x - sourceData.data.x) / xSep; - const sign = endsSepStep < 0 ? 1 : -1; - return { - id, - data: { - keyShape: { - curveOffset: ((sign * width) / 55) * Math.ceil(Math.abs(endsSepStep)), - }, - }, - }; - }); - graph.updateData('edge', edgeDatas); - }); - -window.graph = graph; - }); diff --git a/packages/site/examples/layout/arcDiagram/demo/circularArcDiagram.js b/packages/site/examples/layout/arcDiagram/demo/circularArcDiagram.js deleted file mode 100644 index 91559246e7..0000000000 --- a/packages/site/examples/layout/arcDiagram/demo/circularArcDiagram.js +++ /dev/null @@ -1,135 +0,0 @@ -import { Graph, Extensions, extend } from '@antv/g6'; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -const edgeClusterTransform = (data = {}, options = {}, graphCore) => { - const { dataAdded, dataUpdated, dataRemoved } = data; - const handler = (data = {}, options = {}, core) => { - const { nodes = [], edges = [] } = data; - const nodeMap = new Map(); - nodes.forEach((node) => nodeMap.set(node.id, node)); - edges.forEach((edge) => { - edge.data.cluster = nodeMap.get(edge.source).data.cluster; - }); - return data; - }; - return { - dataAdded: handler(dataAdded, options, graphCore), - dataUpdated: handler(dataUpdated, options, graphCore), - dataRemoved: handler(dataRemoved, options, graphCore), - }; -}; - -const ExtGraph = extend(Graph, { - transforms: { - 'edge-cluster': edgeClusterTransform, - 'transform-v4-data': Extensions.TransformV4Data, - 'map-node-size': Extensions.MapNodeSize, - }, - edges: { - 'quadratic-edge': Extensions.QuadraticEdge, - }, -}); - -fetch('https://gw.alipayobjects.com/os/basement_prod/70cde3be-22e8-4291-98f1-4d5a5b75b62f.json') - .then((res) => res.json()) - .then((data) => { - const graph = new ExtGraph({ - container: 'container', - width, - height, - transforms: [ - 'transform-v4-data', - { - type: 'map-node-size', - field: 'value', - }, - 'edge-cluster', - ], - plugins: [ - { - type: 'lod-controller', - disableLod: true, - }, - ], - layout: { - type: 'circular', - }, - theme: { - type: 'spec', - specification: { - node: { - dataTypeField: 'cluster', - }, - edge: { - dataTypeField: 'cluster', - }, - }, - }, - node: (model) => { - return { - id: model.id, - data: { - ...model.data, - labelShape: { - position: 'right', - textAlign: 'left', - offsetX: 0, - offsetY: 0, - ...model.data.labelShape, - text: model.data.name, - maxWidth: 100, - }, - animates: { - update: [ - { - fields: ['opacity'], - shapeId: 'haloShape', - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - }, - ], - }, - }, - }; - }, - edge: { - type: 'quadratic-edge', - keyShape: { - opacity: 0.4, - controlPoints: [{ x: width / 2, y: height / 2 }], - }, - }, - modes: { - default: ['drag-node', 'click-select', 'zoom-canvas', 'drag-canvas'], - }, - data, - }); - graph.on('afterlayout', (e) => { - const angleUpdates = graph.getAllNodesData().map((node) => { - const { x, y } = node.data; - const vecX = x - width / 2; - const vecY = y - height / 2; - const dist = Math.sqrt(vecX * vecX + vecY * vecY); - let angle = Math.asin(vecY / dist); - if (vecX < 0) angle = -angle; - return { - id: node.id, - data: { - labelShape: { - position: vecX < 0 ? 'center' : 'right', - textAlign: vecX < 0 ? 'right' : 'left', - angle, - }, - }, - }; - }); - graph.updateData('node', angleUpdates); - graph.fitView(); - }); -window.graph = graph; - }); diff --git a/packages/site/examples/layout/arcDiagram/demo/meta.json b/packages/site/examples/layout/arcDiagram/demo/meta.json deleted file mode 100644 index 7cbd0a2f79..0000000000 --- a/packages/site/examples/layout/arcDiagram/demo/meta.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "title": { - "zh": "中文分类", - "en": "Category" - }, - "demos": [ - { - "filename": "basicArcDiagram.js", - "title": { - "zh": "基本弧线图", - "en": "Basic Arc Diagram" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*_eivQrJXt8sAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "circularArcDiagram.js", - "title": { - "zh": "环形弧线图", - "en": "Circular Arc Diagram" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*o-tESYnAAJYAAAAAAAAAAABkARQnAQ" - } - ] -} diff --git a/packages/site/examples/layout/arcDiagram/index.en.md b/packages/site/examples/layout/arcDiagram/index.en.md deleted file mode 100644 index fb0765af13..0000000000 --- a/packages/site/examples/layout/arcDiagram/index.en.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Arc Diagram -order: 9 ---- - -Arc diagram is a method of graph visualization. It places the nodes on one axis, and connects the nodes by arcs. - -## Usage - -- Example 1 : Place the node positions to an axis, and calculate the heights of the arcs according to the distances between endpoints. -- Example 2 : Circular Arc Diagram is a deformation of Arc Diagram. In this example, the nodes are placed on a circle, the edges are quadratic bezier curves. diff --git a/packages/site/examples/layout/arcDiagram/index.zh.md b/packages/site/examples/layout/arcDiagram/index.zh.md deleted file mode 100644 index 6465851868..0000000000 --- a/packages/site/examples/layout/arcDiagram/index.zh.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Arc Diagram 弧线图 -order: 9 ---- - -弧线图是一种图的可视化形式。其将节点排列在一个轴上，边以弧线的形式连接节点。 - -## 使用指南 - -- 代码演示 1 ：通过指定节点位置，并根据节点间距计算 arc 弧线类型边的弧高度可以实现基础弧线图。 -- 代码演示 2 ：指定节点位置到圆环上，使用 quadratic 二阶贝塞尔曲线类型的边实现了弧线图的变种 —— 环形弧线图。 diff --git a/packages/site/examples/layout/circular/API.en.md b/packages/site/examples/layout/circular/API.en.md deleted file mode 100644 index a2253244c4..0000000000 --- a/packages/site/examples/layout/circular/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/circular/API.zh.md b/packages/site/examples/layout/circular/API.zh.md deleted file mode 100644 index e148d9173f..0000000000 --- a/packages/site/examples/layout/circular/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/circular/demo/basic.js b/packages/site/examples/layout/circular/demo/basic.js new file mode 100644 index 0000000000..77d4220d2e --- /dev/null +++ b/packages/site/examples/layout/circular/demo/basic.js @@ -0,0 +1,25 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/circular.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + autoFit: 'view', + data, + layout: { + type: 'circular', + }, + node: { + style: { + size: 20, + fill: '#EFF4FF', + lineWidth: 1, + stroke: '#5F95FF', + }, + }, + behaviors: ['drag-canvas', 'drag-element'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/circular/demo/basic.ts b/packages/site/examples/layout/circular/demo/basic.ts deleted file mode 100644 index e159c275d5..0000000000 --- a/packages/site/examples/layout/circular/demo/basic.ts +++ /dev/null @@ -1,403 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'circular', - }, - node: { - style: { - size: 20, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - behaviors: ['drag-canvas', 'drag-element'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/circular/demo/configurationTranslate.ts b/packages/site/examples/layout/circular/demo/configurationTranslate.ts deleted file mode 100644 index 638c58b9af..0000000000 --- a/packages/site/examples/layout/circular/demo/configurationTranslate.ts +++ /dev/null @@ -1,517 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const descriptionDiv = document.createElement('div'); -descriptionDiv.innerHTML = 'Circular layout with radius: take full use of the canvas, ordering: topology'; -const container = document.getElementById('container') as HTMLDivElement; -container.appendChild(descriptionDiv); -const graph = new Graph({ - container: 'container', - layout: { - type: 'circular', - }, - data, - node: { - style: { - size: 20, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - edge: { - style: { - endArrow: { - path: 'M 0,0 L 8,4 L 8,-4 Z', - fill: '#e2e2e2', - }, - }, - }, - behaviors: ['drag-canvas', 'drag-element'], - animation: true, -}); -graph.render(); - -if (typeof window !== 'undefined') { - window.addEventListener('error', () => { - if (time) { - clearInterval(time); - } - }); - window.onresize = () => { - if (!graph || graph.destroyed) return; - if (!container || !container.scrollWidth || !container.scrollHeight) return; - graph.resize(container.scrollWidth, container.scrollHeight - 30); - }; -} - -layoutConfigTranslation(); - -const time = setInterval(function () { - layoutConfigTranslation(); -}, 11500); - -/** - * - * @param layoutConfig - */ -function updateLayout(layoutConfig) { - graph.setLayout((current) => ({ - ...current, - ...layoutConfig, - })); - graph.render(); -} - -/** - * - */ -function layoutConfigTranslation() { - setTimeout(function () { - descriptionDiv.innerHTML = 'Circular layout, radius = 200, divisions = 5, ordering: degree'; - updateLayout({ - radius: 200, - startAngle: Math.PI / 4, - endAngle: Math.PI, - divisions: 5, - ordering: 'degree', - }); - }, 1000); - - setTimeout(function () { - descriptionDiv.innerHTML = 'Circular layout, radius = 200, divisions = 3, ordering: degree'; - updateLayout({ - startAngle: Math.PI / 4, - endAngle: Math.PI, - divisions: 3, - }); - }, 2500); - - setTimeout(function () { - descriptionDiv.innerHTML = 'Circular layout, radius = 200, divisions = 8, ordering: degree'; - updateLayout({ - radius: 200, - startAngle: 0, - endAngle: Math.PI / 2, - divisions: 8, - }); - }, 4000); - - setTimeout(function () { - descriptionDiv.innerHTML = - 'Circular layout, radius = 10～300(spiral), endAngle: PI, divisions = 1, ordering: degree'; - updateLayout({ - radius: null, - startRadius: 10, - endRadius: 300, - divisions: 1, - startAngle: 0, - endAngle: Math.PI, - }); - }, 5500); - - setTimeout(function () { - descriptionDiv.innerHTML = - 'Circular layout, radius = 10～300(spiral),endAngle: 2 * PI, divisions= 1, ordering: degree'; - updateLayout({ - endAngle: 2 * Math.PI, - }); - }, 7000); - - setTimeout(function () { - descriptionDiv.innerHTML = 'Circular layout, radius = 200, ordering: degree'; - updateLayout({ - radius: 200, - }); - }, 8500); - - setTimeout(function () { - descriptionDiv.innerHTML = 'Circular layout, radius = 200, ordering: topology'; - updateLayout({ - radius: 200, - ordering: 'topology', - }); - }, 10000); -} diff --git a/packages/site/examples/layout/circular/demo/degree.js b/packages/site/examples/layout/circular/demo/degree.js new file mode 100644 index 0000000000..3082c6df8b --- /dev/null +++ b/packages/site/examples/layout/circular/demo/degree.js @@ -0,0 +1,27 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/circular.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + autoFit: 'view', + data, + layout: { + type: 'circular', + ordering: 'degree', + }, + node: { + style: { + size: 20, + labelText: (d) => d.id, + fill: '#EFF4FF', + lineWidth: 1, + stroke: '#5F95FF', + }, + }, + behaviors: ['drag-canvas', 'drag-element'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/circular/demo/degree.ts b/packages/site/examples/layout/circular/demo/degree.ts deleted file mode 100644 index fb0cc87e35..0000000000 --- a/packages/site/examples/layout/circular/demo/degree.ts +++ /dev/null @@ -1,405 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'circular', - ordering: 'degree', - }, - node: { - style: { - size: 20, - labelText: (d) => d.id, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - behaviors: ['drag-canvas', 'drag-element'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/circular/demo/division.js b/packages/site/examples/layout/circular/demo/division.js new file mode 100644 index 0000000000..8d21f431f0 --- /dev/null +++ b/packages/site/examples/layout/circular/demo/division.js @@ -0,0 +1,33 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/circular.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + layout: { + type: 'circular', + divisions: 5, + radius: 200, + startAngle: Math.PI / 4, + endAngle: Math.PI, + }, + node: { + style: { + size: 20, + fill: '#EFF4FF', + lineWidth: 1, + stroke: '#5F95FF', + }, + }, + edge: { + style: { + endArrow: true, + }, + }, + behaviors: ['drag-canvas', 'drag-element'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/circular/demo/division.ts b/packages/site/examples/layout/circular/demo/division.ts deleted file mode 100644 index 2209be6910..0000000000 --- a/packages/site/examples/layout/circular/demo/division.ts +++ /dev/null @@ -1,415 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'circular', - divisions: 5, - radius: 200, - startAngle: Math.PI / 4, - endAngle: Math.PI, - }, - node: { - style: { - size: 20, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - edge: { - style: { - endArrow: { - path: 'M 0,0 L 8,4 L 8,-4 Z', - fill: '#e2e2e2', - }, - }, - }, - behaviors: ['drag-canvas', 'drag-element'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/circular/demo/meta.json b/packages/site/examples/layout/circular/demo/meta.json index 6c62b78fab..2453401d98 100644 --- a/packages/site/examples/layout/circular/demo/meta.json +++ b/packages/site/examples/layout/circular/demo/meta.json @@ -5,7 +5,7 @@ }, "demos": [ { - "filename": "basic.ts", + "filename": "basic.js", "title": { "zh": "基本 Circular 布局", "en": "Basic Circular Layout" @@ -13,15 +13,15 @@ "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZSuXQ4PS2F8AAAAAAAAAAABkARQnAQ" }, { - "filename": "degree.ts", + "filename": "degree.js", "title": { - "zh": "按照节点度数排序的 Circular 布局", - "en": "Degree Ordered Circular" + "zh": "按照节点度数排序", + "en": "Degree Ordered" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MOEeS6ooB7AAAAAAAAAAAABkARQnAQ" }, { - "filename": "spiral.ts", + "filename": "spiral.js", "title": { "zh": "螺旋线布局", "en": "Spiral Layout" @@ -29,20 +29,12 @@ "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*bY0iSqTc3z4AAAAAAAAAAABkARQnAQ" }, { - "filename": "division.ts", + "filename": "division.js", "title": { "zh": "分割环形布局", "en": "Divided Circular Layout" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*u30nQahg6q0AAAAAAAAAAABkARQnAQ" - }, - { - "filename": "configurationTranslate.ts", - "title": { - "zh": "Circular 布局参数动态变化", - "en": "Update Configurations for Circular Layout" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*D85cS7-yqNEAAAAAAAAAAABkARQnAQ" } ] } diff --git a/packages/site/examples/layout/circular/demo/spiral.js b/packages/site/examples/layout/circular/demo/spiral.js new file mode 100644 index 0000000000..bb34c39d82 --- /dev/null +++ b/packages/site/examples/layout/circular/demo/spiral.js @@ -0,0 +1,32 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/circular.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + layout: { + type: 'circular', + startRadius: 10, + endRadius: 300, + }, + node: { + style: { + size: 20, + labelText: (d) => d.id, + fill: '#EFF4FF', + lineWidth: 1, + stroke: '#5F95FF', + }, + }, + edge: { + style: { + endArrow: true, + }, + }, + behaviors: ['drag-canvas', 'drag-element'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/circular/demo/spiral.ts b/packages/site/examples/layout/circular/demo/spiral.ts deleted file mode 100644 index 26753703fe..0000000000 --- a/packages/site/examples/layout/circular/demo/spiral.ts +++ /dev/null @@ -1,414 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'circular', - startRadius: 10, - endRadius: 300, - }, - node: { - style: { - size: 20, - labelText: (d) => d.id, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - edge: { - style: { - endArrow: { - path: 'M 0,0 L 8,4 L 8,-4 Z', - fill: '#e2e2e2', - }, - }, - }, - behaviors: ['drag-canvas', 'drag-element'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/circular/index.en.md b/packages/site/examples/layout/circular/index.en.md index 054f6c07b3..7166636f26 100644 --- a/packages/site/examples/layout/circular/index.en.md +++ b/packages/site/examples/layout/circular/index.en.md @@ -1,16 +1,4 @@ --- title: Circular Layout order: 4 ---- - -Circular layout orders the nodes according to the configuration, and then places the nodes on a circle. - -## Usage - -As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/sub-layout). By tuning the configurations, you can adjust the radius, start angle, end angle, nodes' order method, divisions, spiral style, and so on. - -- Example 1 : Basic Circular Layout, the nodes are placed on the circle clockwise in the data order. -- Example 2 : The nodes are placed on the circle clockwise according to their degrees. -- Example 3 : Spiral layout. -- Example 4 : Divide the nodes into several divisions on the circle. -- Example 5 : Translate the parameters in dynamic. +--- \ No newline at end of file diff --git a/packages/site/examples/layout/circular/index.zh.md b/packages/site/examples/layout/circular/index.zh.md index b224981cfb..5b0a34b644 100644 --- a/packages/site/examples/layout/circular/index.zh.md +++ b/packages/site/examples/layout/circular/index.zh.md @@ -1,16 +1,4 @@ --- title: Circular 环形布局 order: 4 ---- - -Circular 环形布局根据参数指定的排序方式对节点进行排序后，将节点排列在圆环上。 - -## 使用指南 - -G6 内置的 Circular 环形布局可在实例化 Graph 时使用该布局。除此之外，还可以如[子图布局](/zh/docs/manual/middle/layout/sub-layout)所示单独使用布局。该布局可以通过配置调整半径、起始和结束角度、节点排序方式、节点分组、螺旋线布局等。 - -- 代码演示 1 ：基本的环形布局，节点根据在数据中的顺序逆时针排列。 -- 代码演示 2 ：节点根据其度数从大到小逆时针排列。 -- 代码演示 3 ：螺旋线布局。 -- 代码演示 4 ：分组圆环布局。 -- 代码演示 5 ：圆环布局参数动态变化。 +--- \ No newline at end of file diff --git a/packages/site/examples/layout/combo-layout/demo/combo-combined.js b/packages/site/examples/layout/combo-layout/demo/combo-combined.js new file mode 100644 index 0000000000..dbf8ff91fa --- /dev/null +++ b/packages/site/examples/layout/combo-layout/demo/combo-combined.js @@ -0,0 +1,37 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/combo.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + layout: { + type: 'combo-combined', + comboPadding: 2, + }, + node: { + style: { + size: 20, + labelText: (d) => d.id, + }, + palette: { + type: 'group', + field: (d) => d.combo, + }, + }, + edge: { + style: (model) => { + const { size, color } = model.data; + return { + stroke: color || '#99ADD1', + lineWidth: size || 1, + }; + }, + }, + behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'], + autoFit: 'view', + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/comboLayout/demo/meta.json b/packages/site/examples/layout/combo-layout/demo/meta.json similarity index 89% rename from packages/site/examples/layout/comboLayout/demo/meta.json rename to packages/site/examples/layout/combo-layout/demo/meta.json index 5b4e95de01..e74c6148e6 100644 --- a/packages/site/examples/layout/comboLayout/demo/meta.json +++ b/packages/site/examples/layout/combo-layout/demo/meta.json @@ -5,7 +5,7 @@ }, "demos": [ { - "filename": "comboCombined.ts", + "filename": "combo-combined.js", "title": { "zh": "ComboCombined 组合布局", "en": "Combo Combined Layout" diff --git a/packages/site/examples/layout/combo-layout/index.en.md b/packages/site/examples/layout/combo-layout/index.en.md new file mode 100644 index 0000000000..fca1ff9f7c --- /dev/null +++ b/packages/site/examples/layout/combo-layout/index.en.md @@ -0,0 +1,4 @@ +--- +title: Combo Layout +order: 2 +--- diff --git a/packages/site/examples/layout/combo-layout/index.zh.md b/packages/site/examples/layout/combo-layout/index.zh.md new file mode 100644 index 0000000000..a23f3f51de --- /dev/null +++ b/packages/site/examples/layout/combo-layout/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 组合布局 +order: 2 +--- diff --git a/packages/site/examples/layout/comboLayout/API.en.md b/packages/site/examples/layout/comboLayout/API.en.md deleted file mode 100644 index 1fd06ec46f..0000000000 --- a/packages/site/examples/layout/comboLayout/API.en.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: API ---- - -## ComboCombined - - - -## ComboForce - - diff --git a/packages/site/examples/layout/comboLayout/API.zh.md b/packages/site/examples/layout/comboLayout/API.zh.md deleted file mode 100644 index 89a35b5c50..0000000000 --- a/packages/site/examples/layout/comboLayout/API.zh.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: API ---- - -## ComboCombined - Combo 组合布局 - - - -## ComboForce - Combo 力导布局 - - diff --git a/packages/site/examples/layout/comboLayout/demo/comboCombined.ts b/packages/site/examples/layout/comboLayout/demo/comboCombined.ts deleted file mode 100644 index c20e369974..0000000000 --- a/packages/site/examples/layout/comboLayout/demo/comboCombined.ts +++ /dev/null @@ -1,572 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - style: { - parentId: 'a', - }, - }, - { - id: '1', - style: { - parentId: 'a', - }, - }, - { - id: '2', - style: { - parentId: 'a', - }, - }, - { - id: '3', - style: { - parentId: 'a', - }, - }, - { - id: '4', - style: { - parentId: 'a', - }, - }, - { - id: '5', - style: { - parentId: 'a', - }, - }, - { - id: '6', - style: { - parentId: 'a', - }, - }, - { - id: '7', - style: { - parentId: 'a', - }, - }, - { - id: '8', - style: { - parentId: 'a', - }, - }, - { - id: '9', - style: { - parentId: 'a', - }, - }, - { - id: '10', - style: { - parentId: 'a', - }, - }, - { - id: '11', - style: { - parentId: 'a', - }, - }, - { - id: '12', - style: { - parentId: 'a', - }, - }, - { - id: '13', - style: { - parentId: 'a', - }, - }, - { - id: '14', - style: { - parentId: 'a', - }, - }, - { - id: '15', - style: { - parentId: 'a', - }, - }, - { - id: '16', - style: { - parentId: 'b', - }, - }, - { - id: '17', - style: { - parentId: 'b', - }, - }, - { - id: '18', - style: { - parentId: 'b', - }, - }, - { - id: '19', - style: { - parentId: 'b', - }, - }, - { - id: '20', - }, - { - id: '21', - }, - { - id: '22', - }, - { - id: '23', - style: { - parentId: 'c', - }, - }, - { - id: '24', - style: { - parentId: 'a', - }, - }, - { - id: '25', - }, - { - id: '26', - }, - { - id: '27', - style: { - parentId: 'c', - }, - }, - { - id: '28', - style: { - parentId: 'c', - }, - }, - { - id: '29', - style: { - parentId: 'c', - }, - }, - { - id: '30', - style: { - parentId: 'c', - }, - }, - { - id: '31', - style: { - parentId: 'c', - }, - }, - { - id: '32', - style: { - parentId: 'd', - }, - }, - { - id: '33', - style: { - parentId: 'd', - }, - }, - ], - edges: [ - // { - // id: 'edge-647', - // source: 'a', - // target: 'b', - // data: { - // label: 'Combo A - Combo B', - // size: 3, - // color: 'red', - // }, - // }, - // { - // id: 'edge-623', - // source: 'a', - // target: '33', - // data: { - // label: 'Combo-Node', - // size: 3, - // color: 'blue', - // }, - // }, - { - id: 'edge-444', - source: '0', - target: '1', - }, - { - id: 'edge-123', - source: '0', - target: '2', - }, - { - id: 'edge-689', - source: '0', - target: '3', - }, - { - id: 'edge-625', - source: '0', - target: '4', - }, - { - id: 'edge-110', - source: '0', - target: '5', - }, - { - id: 'edge-783', - source: '0', - target: '7', - }, - { - id: 'edge-72', - source: '0', - target: '8', - }, - { - id: 'edge-165', - source: '0', - target: '9', - }, - { - id: 'edge-109', - source: '0', - target: '10', - }, - { - id: 'edge-764', - source: '0', - target: '11', - }, - { - id: 'edge-596', - source: '0', - target: '13', - }, - { - id: 'edge-711', - source: '0', - target: '14', - }, - { - id: 'edge-81', - source: '0', - target: '15', - }, - { - id: 'edge-810', - source: '0', - target: '16', - }, - { - id: 'edge-957', - source: '2', - target: '3', - }, - { - id: 'edge-279', - source: '4', - target: '5', - }, - { - id: 'edge-83', - source: '4', - target: '6', - }, - { - id: 'edge-488', - source: '5', - target: '6', - }, - { - id: 'edge-453', - source: '7', - target: '13', - }, - { - id: 'edge-523', - source: '8', - target: '14', - }, - { - id: 'edge-543', - source: '9', - target: '10', - }, - { - id: 'edge-30', - source: '10', - target: '22', - }, - { - id: 'edge-146', - source: '10', - target: '14', - }, - { - id: 'edge-878', - source: '10', - target: '12', - }, - { - id: 'edge-369', - source: '10', - target: '24', - }, - { - id: 'edge-179', - source: '10', - target: '21', - }, - { - id: 'edge-759', - source: '10', - target: '20', - }, - { - id: 'edge-116', - source: '11', - target: '24', - }, - { - id: 'edge-940', - source: '11', - target: '22', - }, - { - id: 'edge-538', - source: '11', - target: '14', - }, - { - id: 'edge-522', - source: '12', - target: '13', - }, - { - id: 'edge-73', - source: '16', - target: '17', - }, - { - id: 'edge-59', - source: '16', - target: '18', - }, - { - id: 'edge-493', - source: '16', - target: '21', - }, - { - id: 'edge-162', - source: '16', - target: '22', - }, - { - id: 'edge-13', - source: '17', - target: '18', - }, - { - id: 'edge-892', - source: '17', - target: '20', - }, - { - id: 'edge-722', - source: '18', - target: '19', - }, - { - id: 'edge-617', - source: '19', - target: '20', - }, - { - id: 'edge-364', - source: '19', - target: '33', - }, - { - id: 'edge-926', - source: '19', - target: '22', - }, - { - id: 'edge-31', - source: '19', - target: '23', - }, - { - id: 'edge-695', - source: '20', - target: '21', - }, - { - id: 'edge-286', - source: '21', - target: '22', - }, - { - id: 'edge-300', - source: '22', - target: '24', - }, - { - id: 'edge-503', - source: '22', - target: '25', - }, - { - id: 'edge-509', - source: '22', - target: '26', - }, - { - id: 'edge-432', - source: '22', - target: '23', - }, - { - id: 'edge-293', - source: '22', - target: '28', - }, - { - id: 'edge-785', - source: '22', - target: '30', - }, - { - id: 'edge-514', - source: '22', - target: '31', - }, - { - id: 'edge-608', - source: '22', - target: '32', - }, - { - id: 'edge-946', - source: '22', - target: '33', - }, - { - id: 'edge-728', - source: '23', - target: '28', - }, - { - id: 'edge-416', - source: '23', - target: '27', - }, - { - id: 'edge-14', - source: '23', - target: '29', - }, - { - id: 'edge-776', - source: '23', - target: '30', - }, - { - id: 'edge-736', - source: '23', - target: '31', - }, - { - id: 'edge-508', - source: '23', - target: '33', - }, - { - id: 'edge-201', - source: '32', - target: '33', - }, - ], - combos: [ - { - id: 'a', - data: { - label: 'Combo A', - }, - }, - { - id: 'b', - data: { - label: 'Combo B', - }, - }, - { - id: 'c', - data: { - label: 'Combo D', - }, - }, - { - id: 'd', - data: { - label: 'Combo D', - parentId: 'b', - }, - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'combo-combined', - comboPadding: 2, - }, - node: { - style: { - size: 20, - labelText: (d) => d.id, - }, - }, - edge: { - style: (model) => { - const { size, color } = model.data as { size: number; color: string }; - return { - stroke: color || '#99ADD1', - lineWidth: size || 1, - }; - }, - }, - behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'], - autoFit: 'view', -}); - -graph.render(); diff --git a/packages/site/examples/layout/comboLayout/index.en.md b/packages/site/examples/layout/comboLayout/index.en.md deleted file mode 100644 index cadc414581..0000000000 --- a/packages/site/examples/layout/comboLayout/index.en.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Combo Related Layout -order: 2 ---- - -_New feature of V4.6_ Designed for graph with combos. Support configuring the layout for items inside a combo and the layout for the outer combos and nodes. - -_New feature of V3.5._ Combo Force is designed for the graph with combos based on classical force directed layout algorith. It modifies the forces between nodes according to their combo infomation to achieve a final result with clustering nodes inside each combo and no overlappings. - -## Usage - -We suggest to use `'comboCombined'` or `'comboForce'` for the graph with combos. Other layouts in G6 are also availabel, but they do not consider the combo infomation. diff --git a/packages/site/examples/layout/comboLayout/index.zh.md b/packages/site/examples/layout/comboLayout/index.zh.md deleted file mode 100644 index f9a97670ab..0000000000 --- a/packages/site/examples/layout/comboLayout/index.zh.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Combo 相关布局 -order: 2 ---- - -*V4.6.0 新增功能。*是 G6 自研的、适用于带有 combo 的图，可自由组合内外布局，默认情况下，内部使用同心圆布局，外部使用力导向布局，可以有较好的效果，推荐有 combo 的图使用该布局。 - -*V3.5 新增功能。*Combo Force 是基于力导向的专用于带有 combo 的图的布局算法。通过自研改造经典力导向算法，将根据节点的 combo 信息，施加不同的力以达到同 combo 节点尽可能聚集，不同 combo 之间尽可能无重叠的布局。 - -## 使用指南 - -在有 Combo 的图上，推荐使用 `'comboCombined'` 或 `'comboForce'` 布局。其他内置布局将不会考虑 Combo 信息对布局的影响。 diff --git a/packages/site/examples/layout/compactBox/demo/basicCompactBox.ts b/packages/site/examples/layout/compact-box/demo/basic.js similarity index 87% rename from packages/site/examples/layout/compactBox/demo/basicCompactBox.ts rename to packages/site/examples/layout/compact-box/demo/basic.js index f9f1bd3e03..9ee9497a5e 100644 --- a/packages/site/examples/layout/compactBox/demo/basicCompactBox.ts +++ b/packages/site/examples/layout/compact-box/demo/basic.js @@ -1,4 +1,4 @@ -import { Graph, Utils } from '@antv/g6'; +import { Graph, treeToGraphData } from '@antv/g6'; fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) @@ -6,7 +6,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j const graph = new Graph({ container: 'container', autoFit: 'view', - data: Utils.treeToGraphData(data), + data: treeToGraphData(data), behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'], node: { style: { @@ -24,9 +24,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j }, }, edge: { - style: { - type: 'cubic-horizontal', - }, + type: 'cubic-horizontal', }, layout: { type: 'compact-box', diff --git a/packages/site/examples/layout/compactBox/demo/compactBoxLeftAlign.ts b/packages/site/examples/layout/compact-box/demo/horizontal.js similarity index 89% rename from packages/site/examples/layout/compactBox/demo/compactBoxLeftAlign.ts rename to packages/site/examples/layout/compact-box/demo/horizontal.js index 4d9ecb2808..9c2ea36810 100644 --- a/packages/site/examples/layout/compactBox/demo/compactBoxLeftAlign.ts +++ b/packages/site/examples/layout/compact-box/demo/horizontal.js @@ -1,4 +1,4 @@ -import { Graph, Utils } from '@antv/g6'; +import { Graph, treeToGraphData } from '@antv/g6'; fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) @@ -6,7 +6,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j const graph = new Graph({ container: 'container', autoFit: 'view', - data: Utils.treeToGraphData(data), + data: treeToGraphData(data), behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'], node: { style: { @@ -27,9 +27,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j }, }, edge: { - style: { - type: 'cubic-horizontal', - }, + type: 'cubic-horizontal', }, layout: { type: 'compact-box', diff --git a/packages/site/examples/layout/compactBox/demo/meta.json b/packages/site/examples/layout/compact-box/demo/meta.json similarity index 85% rename from packages/site/examples/layout/compactBox/demo/meta.json rename to packages/site/examples/layout/compact-box/demo/meta.json index 901bab1f47..20a45c308d 100644 --- a/packages/site/examples/layout/compactBox/demo/meta.json +++ b/packages/site/examples/layout/compact-box/demo/meta.json @@ -5,7 +5,7 @@ }, "demos": [ { - "filename": "basicCompactBox.ts", + "filename": "basic.js", "title": { "zh": "紧凑树", "en": "CompactBox Layout" @@ -13,7 +13,7 @@ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-FgIT7w4OXwAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "topToBottomCompactBox.ts", + "filename": "vertical.js", "title": { "zh": "从上向下布局", "en": "Top to Bottom CompactBox" @@ -21,7 +21,7 @@ "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*KrAqTrFbNjMAAAAAAAAAAABkARQnAQ" }, { - "filename": "compactBoxLeftAlign.ts", + "filename": "horizontal.js", "title": { "zh": "节点左对齐的紧凑树", "en": "CompactBox with Left Align Nodes" diff --git a/packages/site/examples/layout/compactBox/demo/topToBottomCompactBox.ts b/packages/site/examples/layout/compact-box/demo/vertical.js similarity index 89% rename from packages/site/examples/layout/compactBox/demo/topToBottomCompactBox.ts rename to packages/site/examples/layout/compact-box/demo/vertical.js index e2934f5741..826f2b653a 100644 --- a/packages/site/examples/layout/compactBox/demo/topToBottomCompactBox.ts +++ b/packages/site/examples/layout/compact-box/demo/vertical.js @@ -1,4 +1,4 @@ -import { Graph, Utils } from '@antv/g6'; +import { Graph, treeToGraphData } from '@antv/g6'; fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) @@ -6,7 +6,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j const graph = new Graph({ container: 'container', autoFit: 'view', - data: Utils.treeToGraphData(data), + data: treeToGraphData(data), node: { style: { labelText: (data) => data.id, @@ -28,9 +28,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j }, }, edge: { - style: { - type: 'cubic-vertical', - }, + type: 'cubic-vertical', }, layout: { type: 'compact-box', diff --git a/packages/site/examples/layout/compact-box/index.en.md b/packages/site/examples/layout/compact-box/index.en.md new file mode 100644 index 0000000000..605c24030f --- /dev/null +++ b/packages/site/examples/layout/compact-box/index.en.md @@ -0,0 +1,4 @@ +--- +title: CompactBox +order: 3 +--- diff --git a/packages/site/examples/layout/compact-box/index.zh.md b/packages/site/examples/layout/compact-box/index.zh.md new file mode 100644 index 0000000000..2f02872401 --- /dev/null +++ b/packages/site/examples/layout/compact-box/index.zh.md @@ -0,0 +1,4 @@ +--- +title: CompactBox 紧凑树 +order: 3 +--- diff --git a/packages/site/examples/layout/compactBox/API.en.md b/packages/site/examples/layout/compactBox/API.en.md deleted file mode 100644 index 2d6094cb87..0000000000 --- a/packages/site/examples/layout/compactBox/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/compactBox/API.zh.md b/packages/site/examples/layout/compactBox/API.zh.md deleted file mode 100644 index 0c8200c973..0000000000 --- a/packages/site/examples/layout/compactBox/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/compactBox/index.en.md b/packages/site/examples/layout/compactBox/index.en.md deleted file mode 100644 index 89df284a07..0000000000 --- a/packages/site/examples/layout/compactBox/index.en.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: CompactBox -order: 3 ---- - -The nodes with the same depth will be layed on the same level. The node size will be considred while doing layout.
compactbox - -## Usage - -CompactBox is an appropriate layout method for tree data structure. As the demo below, you can deploy it in `layout` while instantiating Graph. - -You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information. diff --git a/packages/site/examples/layout/compactBox/index.zh.md b/packages/site/examples/layout/compactBox/index.zh.md deleted file mode 100644 index 2dbf93e292..0000000000 --- a/packages/site/examples/layout/compactBox/index.zh.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: CompactBox 紧凑树 -order: 3 ---- - -从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。
compactbox - -## 使用指南 - -紧凑树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。 - -其配置项中 Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。 diff --git a/packages/site/examples/layout/concentricLayout/demo/basicConcentric.ts b/packages/site/examples/layout/concentric/demo/basic.js similarity index 97% rename from packages/site/examples/layout/concentricLayout/demo/basicConcentric.ts rename to packages/site/examples/layout/concentric/demo/basic.js index 766d9263d7..73b8b274c0 100644 --- a/packages/site/examples/layout/concentricLayout/demo/basicConcentric.ts +++ b/packages/site/examples/layout/concentric/demo/basic.js @@ -22,6 +22,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/8dacf27e-e1bc-4522-b6d3-4b6 }, }, edge: { + type: 'line', style: { stroke: '#E2E2E2', }, diff --git a/packages/site/examples/layout/concentricLayout/demo/meta.json b/packages/site/examples/layout/concentric/demo/meta.json similarity index 64% rename from packages/site/examples/layout/concentricLayout/demo/meta.json rename to packages/site/examples/layout/concentric/demo/meta.json index 12913d4cb2..1c80837fb7 100644 --- a/packages/site/examples/layout/concentricLayout/demo/meta.json +++ b/packages/site/examples/layout/concentric/demo/meta.json @@ -5,10 +5,10 @@ }, "demos": [ { - "filename": "basicConcentric.ts", + "filename": "basic.js", "title": { - "zh": "基本 Concentric 同心圆布局", - "en": "Basic Concentric Layout" + "zh": "Concentric 同心圆布局", + "en": "Concentric Layout" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*KXunQKOLCSAAAAAAAAAAAAAADmJ7AQ/original" } diff --git a/packages/site/examples/layout/concentric/index.en.md b/packages/site/examples/layout/concentric/index.en.md new file mode 100644 index 0000000000..b5206107fb --- /dev/null +++ b/packages/site/examples/layout/concentric/index.en.md @@ -0,0 +1,4 @@ +--- +title: Concentric Layout +order: 10 +--- diff --git a/packages/site/examples/layout/concentric/index.zh.md b/packages/site/examples/layout/concentric/index.zh.md new file mode 100644 index 0000000000..01516de8f1 --- /dev/null +++ b/packages/site/examples/layout/concentric/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Concentric 同心圆布局 +order: 10 +--- diff --git a/packages/site/examples/layout/concentricLayout/API.en.md b/packages/site/examples/layout/concentricLayout/API.en.md deleted file mode 100644 index 460fe37bbe..0000000000 --- a/packages/site/examples/layout/concentricLayout/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/concentricLayout/API.zh.md b/packages/site/examples/layout/concentricLayout/API.zh.md deleted file mode 100644 index 7f3d4ae3c8..0000000000 --- a/packages/site/examples/layout/concentricLayout/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/concentricLayout/index.en.md b/packages/site/examples/layout/concentricLayout/index.en.md deleted file mode 100644 index 5665ed7d70..0000000000 --- a/packages/site/examples/layout/concentricLayout/index.en.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Concentric Layout -order: 10 ---- - -Concentric Layout places the nodes on concentric circles. - -## Usage - -As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/sub-layout). This algorithm will order the nodes according to the parameters first, then the node in the front of the order will be placed on the center of the concentric circles. diff --git a/packages/site/examples/layout/concentricLayout/index.zh.md b/packages/site/examples/layout/concentricLayout/index.zh.md deleted file mode 100644 index a9c488d313..0000000000 --- a/packages/site/examples/layout/concentricLayout/index.zh.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Concentric 同心圆布局 -order: 10 ---- - -Concentric 同心圆布局将所有节点放置在同心圆上。 - -## 使用指南 - -G6 内置的 Concentric 同心圆布局可在实例化 Graph 时使用该布局。除此之外，还可以如[子图布局](/zh/docs/manual/middle/layout/sub-layout)所示单独使用布局。该算法首先根据参数指定的排序方式对节点进行排序。排序越靠前，节点将会被放置在越中心的位置。 diff --git a/packages/site/examples/layout/custom/demo/arc.js b/packages/site/examples/layout/custom/demo/arc.js new file mode 100644 index 0000000000..e76e3608e4 --- /dev/null +++ b/packages/site/examples/layout/custom/demo/arc.js @@ -0,0 +1,85 @@ +import { BaseEdge, BaseLayout, ExtensionCategory, Graph, register } from '@antv/g6'; + +class ArcLayout extends BaseLayout { + async execute(data, options) { + const { nodeSep = 20, nodeSize } = { ...this.options, ...options }; + const { nodes } = data; + return { + nodes: nodes.map((node, index) => ({ + id: node.id, + style: { + x: index * (nodeSep + nodeSize), + y: 0, + }, + })), + }; + } +} + +class ArcEdge extends BaseEdge { + getKeyPath(attributes) { + const [sourcePoint, targetPoint] = this.getEndpoints(attributes); + const [sx, sy] = sourcePoint; + const [tx] = targetPoint; + const r = Math.abs(tx - sx) / 2; + + return [ + ['M', sx, sy], + ['A', r, r, 0, 0, sx < tx ? 1 : 0, tx, sy], + ]; + } +} + +register(ExtensionCategory.LAYOUT, 'arc', ArcLayout); +register(ExtensionCategory.EDGE, 'arc', ArcEdge); + +const palette = { + analytics: 'rgb(158, 1, 66)', + data: 'rgb(213, 62, 79)', + animate: 'rgb(244, 109, 67)', + display: 'rgb(253, 174, 97)', + flex: 'rgb(254, 224, 139)', + physics: 'rgb(230, 245, 152)', + query: 'rgb(171, 221, 164)', + scale: 'rgb(102, 194, 165)', + util: 'rgb(50, 136, 189)', + vis: 'rgb(94, 79, 162)', +}; + +fetch('https://gw.alipayobjects.com/os/basement_prod/70cde3be-22e8-4291-98f1-4d5a5b75b62f.json') + .then((res) => res.json()) + .then((data) => { + const getCluster = (id) => data.nodes.find((node) => node.id === id).cluster; + + const graph = new Graph({ + container: 'container', + data, + autoFit: 'view', + animation: false, + node: { + style: { + size: 20, + fill: (d) => palette[d.cluster], + ports: [{ position: 'top' }], + labelText: (d) => d.name, + labelTextAlign: 'start', + labelTextBaseline: 'middle', + labelTransform: 'rotate(90)', + }, + }, + edge: { + type: 'arc', + style: { + stroke: (d) => `linear-gradient(${palette[getCluster(d.source)]}, ${palette[getCluster(d.source)]})`, + strokeOpacity: 0.5, + }, + }, + layout: { + type: 'arc', + nodeSize: 20, + }, + behaviors: ['zoom-canvas', 'drag-canvas'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/custom/demo/bi-graph.js b/packages/site/examples/layout/custom/demo/bi-graph.js new file mode 100644 index 0000000000..34430be082 --- /dev/null +++ b/packages/site/examples/layout/custom/demo/bi-graph.js @@ -0,0 +1,93 @@ +import { BaseLayout, ExtensionCategory, Graph, register } from '@antv/g6'; + +const data = { + nodes: [ + { id: '0', data: { cluster: 'A' } }, + { id: '1', data: { cluster: 'A' } }, + { id: '2', data: { cluster: 'A' } }, + { id: '3', data: { cluster: 'A' } }, + { id: '4', data: { cluster: 'A' } }, + { id: '5', data: { cluster: 'A' } }, + { id: '6', data: { cluster: 'B' } }, + { id: '7', data: { cluster: 'B' } }, + { id: '8', data: { cluster: 'B' } }, + { id: '9', data: { cluster: 'B' } }, + ], + edges: [ + { source: '0', target: '6' }, + { source: '0', target: '7' }, + { source: '0', target: '9' }, + { source: '1', target: '6' }, + { source: '1', target: '9' }, + { source: '1', target: '7' }, + { source: '2', target: '8' }, + { source: '2', target: '9' }, + { source: '2', target: '6' }, + { source: '3', target: '8' }, + { source: '4', target: '6' }, + { source: '4', target: '7' }, + { source: '5', target: '9' }, + ], +}; + +class BiLayout extends BaseLayout { + id = 'bi-layout'; + + async execute(data, options) { + const { sep = 100, nodeSep = 20, nodeSize = 32 } = { ...this.options, ...options }; + + const [A, B] = data.nodes.reduce( + (acc, curr) => { + acc[curr.data.cluster === 'A' ? 0 : 1].push(curr); + return acc; + }, + [[], []], + ); + + return { + nodes: [ + ...A.map((node, i) => ({ + id: node.id, + style: { + x: i * (nodeSep + nodeSize), + y: 0, + }, + })), + ...B.map((node, i) => ({ + id: node.id, + style: { + x: i * (nodeSep + nodeSize), + y: sep, + }, + })), + ], + }; + } +} + +register(ExtensionCategory.LAYOUT, 'bi', BiLayout); + +const graph = new Graph({ + container: 'container', + data, + animation: false, + autoFit: 'center', + node: { + style: { + labelText: (d) => d.id, + }, + palette: { + type: 'group', + field: 'cluster', + }, + }, + layout: { + type: 'bi', + biSep: 300, + nodeSep: 20, + nodeSize: 32, + }, + behaviors: ['drag-canvas', 'drag-element', 'zoom-canvas'], +}); + +graph.render(); diff --git a/packages/site/examples/layout/custom/demo/meta.json b/packages/site/examples/layout/custom/demo/meta.json new file mode 100644 index 0000000000..9e32b67253 --- /dev/null +++ b/packages/site/examples/layout/custom/demo/meta.json @@ -0,0 +1,24 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "bi-graph.js", + "title": { + "zh": "二分图布局", + "en": "Bi-graph Layout" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*G4-YT4NDA2oAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "arc.js", + "title": { + "zh": "弧线图", + "en": "Arc Diagram" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*_eivQrJXt8sAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/packages/site/examples/layout/custom/index.en.md b/packages/site/examples/layout/custom/index.en.md new file mode 100644 index 0000000000..765b511035 --- /dev/null +++ b/packages/site/examples/layout/custom/index.en.md @@ -0,0 +1,4 @@ +--- +title: Custom Layout +order: 16 +--- diff --git a/packages/site/examples/layout/custom/index.zh.md b/packages/site/examples/layout/custom/index.zh.md new file mode 100644 index 0000000000..849f617b9a --- /dev/null +++ b/packages/site/examples/layout/custom/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 自定义布局 +order: 16 +--- diff --git a/packages/site/examples/layout/dagreFlow/demo/antv-dagre-combo.ts b/packages/site/examples/layout/dagre/demo/antv-dagre-combo.js similarity index 75% rename from packages/site/examples/layout/dagreFlow/demo/antv-dagre-combo.ts rename to packages/site/examples/layout/dagre/demo/antv-dagre-combo.js index 3c151cd41d..b4316d5830 100644 --- a/packages/site/examples/layout/dagreFlow/demo/antv-dagre-combo.ts +++ b/packages/site/examples/layout/dagre/demo/antv-dagre-combo.js @@ -6,44 +6,44 @@ fetch('https://assets.antv.antgroup.com/g6/dagre-combo.json') const graph = new Graph({ container: 'container', autoFit: 'view', + animation: true, data, + node: { + type: 'rect', + style: { + size: [60, 30], + radius: 8, + labelText: (d) => d.id, + labelPlacement: 'center', + ports: [{ placement: 'top' }, { placement: 'bottom' }], + }, + palette: { + field: (d) => d.combo, + }, + }, + edge: { + type: 'cubic-vertical', + style: { + endArrow: true, + }, + }, + combo: { + type: 'rect', + style: { + radius: 8, + labelText: (d) => d.id, + lineDash: 0, + collapsedLineDash: [5, 5], + }, + }, layout: { type: 'antv-dagre', ranksep: 50, nodesep: 5, sortByCombo: true, }, - node: { - style: { - type: 'rect', - size: [60, 30], - radius: 8, - labelPlacement: 'center', - labelText: (d) => d.id, - ports: [{ placement: 'top' }, { placement: 'bottom' }], - fill: (d) => { - const styles = { A: '#F09056', B: '#D580FF', C: '#01C9C9' }; - return styles[d.style.parentId] || '#1883FF'; - }, - }, - }, - edge: { - style: { - type: 'cubic-vertical', - endArrow: true, - lineWidth: 2, - stroke: '#C2C8D5', - }, - }, - combo: { - style: { - type: 'rect', - labelText: (d) => d.id, - lineDash: 0, - collapsedLineDash: [5, 5], - }, - }, behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'], }); + graph.render(); }); diff --git a/packages/site/examples/layout/dagreFlow/demo/antv-dagre.ts b/packages/site/examples/layout/dagre/demo/antv-dagre.js similarity index 52% rename from packages/site/examples/layout/dagreFlow/demo/antv-dagre.ts rename to packages/site/examples/layout/dagre/demo/antv-dagre.js index 347371fc45..444a02ea0e 100644 --- a/packages/site/examples/layout/dagreFlow/demo/antv-dagre.ts +++ b/packages/site/examples/layout/dagre/demo/antv-dagre.js @@ -29,18 +29,18 @@ const data = { ], }; -const layouts = { - Default: { type: 'antv-dagre', nodesep: 100, ranksep: 70, controlPoints: true }, - LR: { type: 'antv-dagre', rankdir: 'LR', align: 'DL', nodesep: 50, ranksep: 70, controlPoints: true }, - 'LR&UL': { type: 'antv-dagre', rankdir: 'LR', align: 'UL', controlPoints: true, nodesep: 50, ranksep: 70 }, -}; - const container = document.getElementById('container'); const graph = new Graph({ container, + animation: false, data, - layout: layouts.Default, + layout: { + type: 'antv-dagre', + nodesep: 100, + ranksep: 70, + controlPoints: true, + }, node: { style: { type: 'rect', @@ -51,8 +51,8 @@ const graph = new Graph({ }, }, edge: { + type: 'polyline', style: { - type: 'polyline', endArrow: true, lineWidth: 2, stroke: '#C2C8D5', @@ -64,23 +64,17 @@ const graph = new Graph({ graph.render(); -const btnContainer = document.createElement('div'); -btnContainer.style.position = 'absolute'; -btnContainer.style.zIndex = '10'; -container.appendChild(btnContainer); -const tip = document.createElement('span'); -tip.innerHTML = '👉 Change configs:'; -btnContainer.appendChild(tip); +window.addPanel((gui) => { + const config = { layout: 'default' }; + const layouts = { + default: { type: 'antv-dagre', nodesep: 100, ranksep: 70, controlPoints: true }, + LR: { type: 'antv-dagre', rankdir: 'LR', align: 'DL', nodesep: 50, ranksep: 70, controlPoints: true }, + 'LR&UL': { type: 'antv-dagre', rankdir: 'LR', align: 'UL', controlPoints: true, nodesep: 50, ranksep: 70 }, + }; -Object.keys(layouts).forEach((name, i) => { - const btn = document.createElement('a'); - btn.innerHTML = name; - btn.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; - btn.style.padding = '4px'; - btn.style.marginLeft = i > 0 ? '24px' : '8px'; - btnContainer.appendChild(btn); - btn.addEventListener('click', () => { - graph.setLayout(layouts[name]); - graph.layout(); + gui.add(config, 'layout', Object.keys(layouts)).onChange(async (layout) => { + graph.setLayout(layouts[layout]); + await graph.layout(); + graph.fitCenter(); }); }); diff --git a/packages/site/examples/layout/dagreFlow/demo/dagre.ts b/packages/site/examples/layout/dagre/demo/dagre.js similarity index 96% rename from packages/site/examples/layout/dagreFlow/demo/dagre.ts rename to packages/site/examples/layout/dagre/demo/dagre.js index 17c91c5d26..5b81b4f97a 100644 --- a/packages/site/examples/layout/dagreFlow/demo/dagre.ts +++ b/packages/site/examples/layout/dagre/demo/dagre.js @@ -20,8 +20,8 @@ const graph = new Graph({ ], }, node: { + type: 'rect', style: { - type: 'rect', radius: 10, iconText: (d) => d.data.label, size: (d) => [d.data.width, d.data.height], @@ -32,8 +32,8 @@ const graph = new Graph({ }, }, edge: { + type: 'polyline', style: { - type: 'polyline', router: true, }, }, diff --git a/packages/site/examples/layout/dagreFlow/demo/meta.json b/packages/site/examples/layout/dagre/demo/meta.json similarity index 87% rename from packages/site/examples/layout/dagreFlow/demo/meta.json rename to packages/site/examples/layout/dagre/demo/meta.json index 86b3b3b4d9..93de1998f6 100644 --- a/packages/site/examples/layout/dagreFlow/demo/meta.json +++ b/packages/site/examples/layout/dagre/demo/meta.json @@ -5,7 +5,7 @@ }, "demos": [ { - "filename": "antv-dagre.ts", + "filename": "antv-dagre.js", "title": { "zh": "Dagre 流程图", "en": "Dagre Layout" @@ -13,7 +13,7 @@ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ESU8SrsUnlwAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "antv-dagre-combo.ts", + "filename": "antv-dagre-combo.js", "title": { "zh": "带有 Combo 的流程图", "en": "Dagre with Combos" @@ -21,7 +21,7 @@ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*h60aQKusJRcAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "dagre.ts", + "filename": "dagre.js", "title": { "zh": "Dagre.js 布局", "en": "Dagre.js Layout" diff --git a/packages/site/examples/layout/dagre/index.en.md b/packages/site/examples/layout/dagre/index.en.md new file mode 100644 index 0000000000..aea076cc4f --- /dev/null +++ b/packages/site/examples/layout/dagre/index.en.md @@ -0,0 +1,4 @@ +--- +title: Dagre Layout +order: 1 +--- diff --git a/packages/site/examples/layout/dagre/index.zh.md b/packages/site/examples/layout/dagre/index.zh.md new file mode 100644 index 0000000000..e765213d27 --- /dev/null +++ b/packages/site/examples/layout/dagre/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Dagre 布局 +order: 1 +--- diff --git a/packages/site/examples/layout/dagreFlow/API.en.md b/packages/site/examples/layout/dagreFlow/API.en.md deleted file mode 100644 index 364934cf22..0000000000 --- a/packages/site/examples/layout/dagreFlow/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/dagreFlow/API.zh.md b/packages/site/examples/layout/dagreFlow/API.zh.md deleted file mode 100644 index 01d6b15fe2..0000000000 --- a/packages/site/examples/layout/dagreFlow/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/dagreFlow/index.en.md b/packages/site/examples/layout/dagreFlow/index.en.md deleted file mode 100644 index 3cb004977b..0000000000 --- a/packages/site/examples/layout/dagreFlow/index.en.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Dagre Layout -order: 1 ---- - -Dagre Layout is an appropriate layout method for directed flow graph. It will calculate the levels and positions of nodes automatically according to the edge directions in the data. - -## Usage - -As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/sub-layout). By tuning the parameters, you can adjust the layout direction, node alignment, node separation, level separation, and so on. - -- Example 1 : Simple dagre layout. -- Example 2 : Dagre Layout with combos. -- Example 3 : Dagre layout from left to right and align top. -- Example 4 : Dagre layout from left to right. -- Example 5 : Translate the layout parameters in dynamic. diff --git a/packages/site/examples/layout/dagreFlow/index.zh.md b/packages/site/examples/layout/dagreFlow/index.zh.md deleted file mode 100644 index cffa9de450..0000000000 --- a/packages/site/examples/layout/dagreFlow/index.zh.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Dagre 流程图布局 -order: 1 ---- - -Dagre 是适合有向流程图的布局算法。其根据图数据中边的方向，自动计算节点的层级及位置。 - -## 使用指南 - -G6 内置的 Dagre 布局可以实现有向图的自动分层布局。如下面代码所示，可在实例化 Graph 时使用该布局。除此之外，还可以如[子图布局](/zh/docs/manual/middle/layout/sub-layout)所示单独使用布局。该布局可以通过配置调整布局方向、节点对齐方式、节点间距、层高等。 - -- 代码演示 1 ：简单的 Dagre 布局。 -- 代码演示 2 ：带有 Combo 的 Dagre 布局（目前只能处理好同层节点的 Combo 问题）。 -- 代码演示 3 ：自左向右向上对齐的 Dagre 布局。 -- 代码演示 4 ：自左向右的 Dagre 布局。 -- 代码演示 5 ：Dagre 布局参数动态变化。 diff --git a/packages/site/examples/layout/dendrogram/API.en.md b/packages/site/examples/layout/dendrogram/API.en.md deleted file mode 100644 index 7764eb60ef..0000000000 --- a/packages/site/examples/layout/dendrogram/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/dendrogram/API.zh.md b/packages/site/examples/layout/dendrogram/API.zh.md deleted file mode 100644 index c34fe443de..0000000000 --- a/packages/site/examples/layout/dendrogram/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/dendrogram/demo/basicDendrogram.ts b/packages/site/examples/layout/dendrogram/demo/basic.js similarity index 51% rename from packages/site/examples/layout/dendrogram/demo/basicDendrogram.ts rename to packages/site/examples/layout/dendrogram/demo/basic.js index 1b18bb9844..92ecc1b363 100644 --- a/packages/site/examples/layout/dendrogram/demo/basicDendrogram.ts +++ b/packages/site/examples/layout/dendrogram/demo/basic.js @@ -1,4 +1,4 @@ -import { Graph, Utils } from '@antv/g6'; +import { Graph, treeToGraphData } from '@antv/g6'; fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) @@ -6,26 +6,16 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j const graph = new Graph({ container: 'container', autoFit: 'view', - data: Utils.treeToGraphData(data), + data: treeToGraphData(data), node: { style: { labelText: (d) => d.id, - labelPlacement: (model) => (model.style!.children?.length ? 'left' : 'right'), - ports: [ - { - placement: 'right', - }, - { - placement: 'left', - }, - ], + labelPlacement: (model) => (model.children?.length ? 'left' : 'right'), + ports: [{ placement: 'right' }, { placement: 'left' }], }, }, - edge: { - style: { - type: 'cubic-horizontal', - }, + type: 'cubic-horizontal', }, layout: { type: 'dendrogram', @@ -33,7 +23,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j nodeSep: 36, rankSep: 250, }, - behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand-tree'], + behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'], }); graph.render(); diff --git a/packages/site/examples/layout/dendrogram/demo/meta.json b/packages/site/examples/layout/dendrogram/demo/meta.json index 38938e3ca2..9b3311bac1 100644 --- a/packages/site/examples/layout/dendrogram/demo/meta.json +++ b/packages/site/examples/layout/dendrogram/demo/meta.json @@ -5,18 +5,18 @@ }, "demos": [ { - "filename": "basicDendrogram.ts", + "filename": "basic.js", "title": { "zh": "生态树", - "en": "Basic Dendrogram Layout" + "en": "Dendrogram Layout" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*P-qOSoDNuckAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "tbDendrogram.ts", + "filename": "vertical.js", "title": { - "zh": "至上而下的生态树", - "en": "Top to Bottom Dendrogram" + "zh": "垂直布局", + "en": "Vertical Layout" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*nTKmRKkyUVUAAAAAAAAAAABkARQnAQ" } diff --git a/packages/site/examples/layout/dendrogram/demo/tbDendrogram.ts b/packages/site/examples/layout/dendrogram/demo/tbDendrogram.ts deleted file mode 100644 index 8bc0400fca..0000000000 --- a/packages/site/examples/layout/dendrogram/demo/tbDendrogram.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Graph, Utils } from '@antv/g6'; - -fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') - .then((res) => res.json()) - .then((data) => { - const graph = new Graph({ - container: 'container', - autoFit: 'view', - data: Utils.treeToGraphData(data), - node: { - style: (model) => { - const hasChildren = !!model.style!.children?.length; - return { - labelText: model.id, - labelPlacement: hasChildren ? 'right' : 'bottom', - labelMaxWidth: 200, - labelTextAlign: 'start', - transform: hasChildren ? '' : 'rotate(90deg)', - ports: [ - { - placement: 'bottom', - }, - { - placement: 'top', - }, - ], - }; - }, - }, - - edge: { - style: { - type: 'cubic-vertical', - }, - }, - layout: { - type: 'dendrogram', - direction: 'TB', // H / V / LR / RL / TB / BT - nodeSep: 40, - rankSep: 100, - }, - behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand-tree'], - }); - - graph.render(); - }); diff --git a/packages/site/examples/layout/dendrogram/demo/vertical.js b/packages/site/examples/layout/dendrogram/demo/vertical.js new file mode 100644 index 0000000000..748ff383b2 --- /dev/null +++ b/packages/site/examples/layout/dendrogram/demo/vertical.js @@ -0,0 +1,38 @@ +import { Graph, treeToGraphData } from '@antv/g6'; + +fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + autoFit: 'view', + data: treeToGraphData(data), + node: { + style: (data) => { + const isLeaf = !data.children?.length; + return { + labelText: data.id, + labelWordWrap: true, + labelWordWrapWidth: 150, + labelDy: isLeaf ? 0 : 20, + labelTextAlign: isLeaf ? 'start' : 'center', + labelTextBaseline: 'middle', + labelTransform: isLeaf ? 'rotate(90deg)' : '', + ports: [{ placement: 'bottom' }, { placement: 'top' }], + }; + }, + }, + edge: { + type: 'cubic-vertical', + }, + layout: { + type: 'dendrogram', + direction: 'TB', // H / V / LR / RL / TB / BT + nodeSep: 40, + rankSep: 100, + }, + behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand-tree'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/dendrogram/index.en.md b/packages/site/examples/layout/dendrogram/index.en.md index 645ab71c83..1e25dcfbcf 100644 --- a/packages/site/examples/layout/dendrogram/index.en.md +++ b/packages/site/examples/layout/dendrogram/index.en.md @@ -2,11 +2,3 @@ title: Dendrogram order: 4 --- - -The leaves will be aligned on the same level. This algorithm does not consider the node size, which means all the nodes will be regarded as unit size with 1px.
dendrogram - -## Usage - -Dendrogram is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in `layout` while instantiating Graph. - -You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information. diff --git a/packages/site/examples/layout/dendrogram/index.zh.md b/packages/site/examples/layout/dendrogram/index.zh.md index dbf5aaf6ad..076fd93b82 100644 --- a/packages/site/examples/layout/dendrogram/index.zh.md +++ b/packages/site/examples/layout/dendrogram/index.zh.md @@ -2,9 +2,3 @@ title: Dendrogram 生态树 order: 4 --- - -不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为 1 个像素点。
dendrogram - -## 使用指南 - -生态树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。 diff --git a/packages/site/examples/layout/force-directed/demo/3d-force.js b/packages/site/examples/layout/force-directed/demo/3d-force.js new file mode 100644 index 0000000000..cb7607a8bf --- /dev/null +++ b/packages/site/examples/layout/force-directed/demo/3d-force.js @@ -0,0 +1,56 @@ +import { CameraSetting, ExtensionCategory, Graph, register } from '@antv/g6'; +import { Light, Line3D, ObserveCanvas3D, Sphere, ZoomCanvas3D, renderer } from '@antv/g6-extension-3d'; + +register(ExtensionCategory.PLUGIN, '3d-light', Light); +register(ExtensionCategory.NODE, 'sphere', Sphere); +register(ExtensionCategory.EDGE, 'line3d', Line3D); +register(ExtensionCategory.PLUGIN, 'camera-setting', CameraSetting); +register(ExtensionCategory.BEHAVIOR, 'zoom-canvas-3d', ZoomCanvas3D); +register(ExtensionCategory.BEHAVIOR, 'observe-canvas-3d', ObserveCanvas3D); + +fetch('https://assets.antv.antgroup.com/g6/d3-force-3d.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + animation: true, + renderer, + data, + layout: { + type: 'd3-force-3d', + }, + node: { + type: 'sphere', + style: { + materialType: 'phong', + }, + palette: { + color: 'tableau', + type: 'group', + field: 'group', + }, + }, + edge: { + type: 'line3d', + }, + behaviors: ['observe-canvas-3d', 'zoom-canvas-3d'], + plugins: [ + { + type: 'camera-setting', + projectionMode: 'perspective', + near: 0.1, + far: 1000, + fov: 45, + aspect: 1, + }, + { + type: '3d-light', + directional: { + direction: [0, 0, 1], + }, + }, + ], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/forceDirected/demo/basicFA2.js b/packages/site/examples/layout/force-directed/demo/atlas2.js similarity index 95% rename from packages/site/examples/layout/forceDirected/demo/basicFA2.js rename to packages/site/examples/layout/force-directed/demo/atlas2.js index 2e8e60e007..584705de3f 100644 --- a/packages/site/examples/layout/forceDirected/demo/basicFA2.js +++ b/packages/site/examples/layout/force-directed/demo/atlas2.js @@ -6,6 +6,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json') const graph = new Graph({ container: 'container', data, + autoFit: 'view', layout: { type: 'force-atlas2', preventOverlap: true, diff --git a/packages/site/examples/layout/force-directed/demo/collision.js b/packages/site/examples/layout/force-directed/demo/collision.js new file mode 100644 index 0000000000..e9ef9ea0df --- /dev/null +++ b/packages/site/examples/layout/force-directed/demo/collision.js @@ -0,0 +1,87 @@ +import { BaseBehavior, ExtensionCategory, Graph, invokeLayoutMethod, register } from '@antv/g6'; + +function getData(width, size = 200) { + const k = width / 200; + const r = randomUniform(k * 2, k * 8); + const n = 4; + return { + nodes: Array.from({ length: size }, (_, i) => ({ id: `${i}`, data: { r: r(), group: i && (i % n) + 1 } })), + edges: [], + }; +} + +function randomUniform(min, max) { + min = min == null ? 0 : +min; + max = max == null ? 1 : +max; + if (arguments.length === 1) (max = min), (min = 0); + else max -= min; + return function () { + return Math.random() * max + min; + }; +} + +class CollisionElement extends BaseBehavior { + constructor(context) { + super(context, {}); + this.onPointerMove = this.onPointerMove.bind(this); + this.bindEvents(); + } + + bindEvents() { + this.context.graph.on('pointermove', this.onPointerMove); + } + + onPointerMove(event) { + const pos = this.context.graph.getCanvasByClient([event.client.x, event.client.y]); + const layoutInstance = this.context.layout + ?.getLayoutInstance() + .find((layout) => ['d3-force', 'd3-force-3d'].includes(layout?.id)); + + if (layoutInstance) { + invokeLayoutMethod(layoutInstance, 'setFixedPosition', '0', [...pos]); + } + } +} + +register(ExtensionCategory.BEHAVIOR, 'collision-element', CollisionElement); + +const container = document.getElementById('container'); +const width = container.scrollWidth; + +const graph = new Graph({ + container, + animation: true, + data: getData(width), + layout: { + type: 'd3force', + alphaTarget: 0.3, + velocityDecay: 0.1, + x: { + strength: 0.01, + }, + y: { + strength: 0.01, + }, + collide: { + radius: (d) => d.data.r, + iterations: 3, + }, + manyBody: { + strength: (d, i) => (i ? 0 : (-width * 2) / 3), + }, + link: false, + }, + node: { + style: { + size: (d) => (d.id === '0' ? 0 : d.data.r * 2), + }, + palette: { + color: 'tableau', + type: 'group', + field: (d) => d.data.group, + }, + }, + behaviors: ['collision-element'], +}); + +graph.render(); diff --git a/packages/site/examples/layout/force-directed/demo/d3-force.js b/packages/site/examples/layout/force-directed/demo/d3-force.js new file mode 100644 index 0000000000..d153cd4ff1 --- /dev/null +++ b/packages/site/examples/layout/force-directed/demo/d3-force.js @@ -0,0 +1,30 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/cluster.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + animation: true, + data, + node: { + style: { + labelText: (d) => d.id, + ports: [], + }, + palette: { + type: 'group', + field: 'cluster', + }, + }, + layout: { + type: 'd3force', + collide: { + strength: 0.5, + }, + }, + behaviors: ['zoom-canvas', 'drag-canvas'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/force-directed/demo/force.js b/packages/site/examples/layout/force-directed/demo/force.js new file mode 100644 index 0000000000..9ea5cc5c10 --- /dev/null +++ b/packages/site/examples/layout/force-directed/demo/force.js @@ -0,0 +1,31 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/cluster.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + node: { + style: { + labelText: (d) => d.id, + ports: [], + }, + palette: { + type: 'group', + field: 'cluster', + }, + }, + layout: { + type: 'force', + linkDistance: 50, + animation: true, + clustering: true, + nodeClusterBy: 'cluster', + clusterNodeStrength: 70, + }, + behaviors: ['zoom-canvas', 'drag-canvas'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/force-directed/demo/mesh.js b/packages/site/examples/layout/force-directed/demo/mesh.js new file mode 100644 index 0000000000..ad50259a66 --- /dev/null +++ b/packages/site/examples/layout/force-directed/demo/mesh.js @@ -0,0 +1,47 @@ +import { Graph } from '@antv/g6'; + +function getData(size = 10) { + const nodes = Array.from({ length: size * size }, (_, i) => ({ id: `${i}` })); + const edges = []; + for (let y = 0; y < size; ++y) { + for (let x = 0; x < size; ++x) { + if (y > 0) edges.push({ source: `${(y - 1) * size + x}`, target: `${y * size + x}` }); + if (x > 0) edges.push({ source: `${y * size + (x - 1)}`, target: `${y * size + x}` }); + } + } + return { nodes, edges }; +} + +const graph = new Graph({ + animation: true, + data: getData(), + layout: { + type: 'd3force', + manyBody: { + strength: -30, + }, + link: { + strength: 1, + distance: 20, + iterations: 10, + }, + }, + node: { + style: { + size: 10, + fill: '#000', + }, + }, + edge: { + style: { + stroke: '#000', + }, + }, + behaviors: [{ type: 'drag-element-force' }, 'zoom-canvas'], +}); + +graph.render(); + +window.addPanel((gui) => { + gui.add({ msg: 'Try to drag nodes' }, 'msg').name('Tips').disable(); +}); diff --git a/packages/site/examples/layout/force-directed/demo/meta.json b/packages/site/examples/layout/force-directed/demo/meta.json new file mode 100644 index 0000000000..bf73c0ca6a --- /dev/null +++ b/packages/site/examples/layout/force-directed/demo/meta.json @@ -0,0 +1,56 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "force.js", + "title": { + "zh": "Force 聚类", + "en": "Clustering Force Layout" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sA14SZo9BBMAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "atlas2.js", + "title": { + "zh": "Force Atlas 2", + "en": "Force-Atlas 2 Layout" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-HgiS6CyuuEAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "d3-force.js", + "title": { + "zh": "D3 力导向布局", + "en": "D3 Force Layout" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-_sFS5IRGGcAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "3d-force.js", + "title": { + "zh": "3D 力导向布局", + "en": "3D Force Layout" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*4mbSTJLOXkgAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "mesh.js", + "title": { + "zh": "网格效果", + "en": "Mesh Layout" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ykD5QqSEgeEAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "collision.js", + "title": { + "zh": "弹性碰撞效果", + "en": "Collision Layout" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yzv_To2Wm_EAAAAAAAAAAAAADmJ7AQ/original" + } + ] +} diff --git a/packages/site/examples/layout/force-directed/index.en.md b/packages/site/examples/layout/force-directed/index.en.md new file mode 100644 index 0000000000..7645f96424 --- /dev/null +++ b/packages/site/examples/layout/force-directed/index.en.md @@ -0,0 +1,4 @@ +--- +title: Force-directed Layout +order: 0 +--- diff --git a/packages/site/examples/layout/force-directed/index.zh.md b/packages/site/examples/layout/force-directed/index.zh.md new file mode 100644 index 0000000000..0c13b5e07d --- /dev/null +++ b/packages/site/examples/layout/force-directed/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 力导向图布局 +order: 0 +--- diff --git a/packages/site/examples/layout/forceDirected/API.en.md b/packages/site/examples/layout/forceDirected/API.en.md deleted file mode 100644 index 7e4bb41a45..0000000000 --- a/packages/site/examples/layout/forceDirected/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/forceDirected/API.zh.md b/packages/site/examples/layout/forceDirected/API.zh.md deleted file mode 100644 index 8075f30ecb..0000000000 --- a/packages/site/examples/layout/forceDirected/API.zh.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: API ---- - -# Force Layout - - - -# Force Atlas 2 Layout - - diff --git a/packages/site/examples/layout/forceDirected/demo/basicForce.js b/packages/site/examples/layout/forceDirected/demo/basicForce.js deleted file mode 100644 index 97de06e290..0000000000 --- a/packages/site/examples/layout/forceDirected/demo/basicForce.js +++ /dev/null @@ -1,546 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - data: { - cluster: 'a', - }, - }, - { - id: '1', - data: { - cluster: 'a', - }, - }, - { - id: '2', - data: { - cluster: 'a', - }, - }, - { - id: '3', - data: { - cluster: 'a', - }, - }, - { - id: '4', - data: { - cluster: 'a', - }, - }, - { - id: '5', - data: { - cluster: 'a', - }, - }, - { - id: '6', - data: { - cluster: 'a', - }, - }, - { - id: '7', - data: { - cluster: 'a', - }, - }, - { - id: '8', - data: { - cluster: 'a', - }, - }, - { - id: '9', - data: { - cluster: 'a', - }, - }, - { - id: '10', - data: { - cluster: 'a', - }, - }, - { - id: '11', - data: { - cluster: 'a', - }, - }, - { - id: '12', - data: { - cluster: 'a', - }, - }, - { - id: '13', - data: { - cluster: 'b', - }, - }, - { - id: '14', - data: { - cluster: 'b', - }, - }, - { - id: '15', - data: { - cluster: 'b', - }, - }, - { - id: '16', - data: { - cluster: 'b', - }, - }, - { - id: '17', - data: { - cluster: 'b', - }, - }, - { - id: '18', - data: { - cluster: 'c', - }, - }, - { - id: '19', - data: { - cluster: 'c', - }, - }, - { - id: '20', - data: { - cluster: 'c', - }, - }, - { - id: '21', - data: { - cluster: 'c', - }, - }, - { - id: '22', - data: { - cluster: 'c', - }, - }, - { - id: '23', - data: { - cluster: 'c', - }, - }, - { - id: '24', - data: { - cluster: 'c', - }, - }, - { - id: '25', - data: { - cluster: 'c', - }, - }, - { - id: '26', - data: { - cluster: 'c', - }, - }, - { - id: '27', - data: { - cluster: 'c', - }, - }, - { - id: '28', - data: { - cluster: 'c', - }, - }, - { - id: '29', - data: { - cluster: 'c', - }, - }, - { - id: '30', - data: { - cluster: 'c', - }, - }, - { - id: '31', - data: { - cluster: 'd', - }, - }, - { - id: '32', - data: { - cluster: 'd', - }, - }, - { - id: '33', - data: { - cluster: 'd', - }, - }, - ], - edges: [ - { - id: 'edge-583', - source: '0', - target: '1', - }, - { - id: 'edge-0', - source: '0', - target: '2', - }, - { - id: 'edge-888', - source: '0', - target: '3', - }, - { - id: 'edge-560', - source: '0', - target: '4', - }, - { - id: 'edge-34', - source: '0', - target: '5', - }, - { - id: 'edge-654', - source: '0', - target: '7', - }, - { - id: 'edge-317', - source: '0', - target: '8', - }, - { - id: 'edge-962', - source: '0', - target: '9', - }, - { - id: 'edge-746', - source: '0', - target: '10', - }, - { - id: 'edge-75', - source: '0', - target: '11', - }, - { - id: 'edge-80', - source: '0', - target: '13', - }, - { - id: 'edge-674', - source: '0', - target: '14', - }, - { - id: 'edge-795', - source: '0', - target: '15', - }, - { - id: 'edge-886', - source: '0', - target: '16', - }, - { - id: 'edge-630', - source: '2', - target: '3', - }, - { - id: 'edge-710', - source: '4', - target: '5', - }, - { - id: 'edge-284', - source: '4', - target: '6', - }, - { - id: 'edge-758', - source: '5', - target: '6', - }, - { - id: 'edge-288', - source: '7', - target: '13', - }, - { - id: 'edge-103', - source: '8', - target: '14', - }, - { - id: 'edge-873', - source: '9', - target: '10', - }, - { - id: 'edge-108', - source: '10', - target: '22', - }, - { - id: 'edge-214', - source: '10', - target: '14', - }, - { - id: 'edge-928', - source: '10', - target: '12', - }, - { - id: 'edge-717', - source: '10', - target: '24', - }, - { - id: 'edge-752', - source: '10', - target: '21', - }, - { - id: 'edge-424', - source: '10', - target: '20', - }, - { - id: 'edge-755', - source: '11', - target: '24', - }, - { - id: 'edge-822', - source: '11', - target: '22', - }, - { - id: 'edge-366', - source: '11', - target: '14', - }, - { - id: 'edge-411', - source: '12', - target: '13', - }, - { - id: 'edge-781', - source: '16', - target: '17', - }, - { - id: 'edge-742', - source: '16', - target: '18', - }, - { - id: 'edge-762', - source: '16', - target: '21', - }, - { - id: 'edge-519', - source: '16', - target: '22', - }, - { - id: 'edge-187', - source: '17', - target: '18', - }, - { - id: 'edge-919', - source: '17', - target: '20', - }, - { - id: 'edge-854', - source: '18', - target: '19', - }, - { - id: 'edge-199', - source: '19', - target: '20', - }, - { - id: 'edge-475', - source: '19', - target: '33', - }, - { - id: 'edge-55', - source: '19', - target: '22', - }, - { - id: 'edge-528', - source: '19', - target: '23', - }, - { - id: 'edge-741', - source: '20', - target: '21', - }, - { - id: 'edge-920', - source: '21', - target: '22', - }, - { - id: 'edge-457', - source: '22', - target: '24', - }, - { - id: 'edge-524', - source: '22', - target: '25', - }, - { - id: 'edge-814', - source: '22', - target: '26', - }, - { - id: 'edge-258', - source: '22', - target: '23', - }, - { - id: 'edge-222', - source: '22', - target: '28', - }, - { - id: 'edge-803', - source: '22', - target: '30', - }, - { - id: 'edge-693', - source: '22', - target: '31', - }, - { - id: 'edge-491', - source: '22', - target: '32', - }, - { - id: 'edge-46', - source: '22', - target: '33', - }, - { - id: 'edge-145', - source: '23', - target: '28', - }, - { - id: 'edge-45', - source: '23', - target: '27', - }, - { - id: 'edge-98', - source: '23', - target: '29', - }, - { - id: 'edge-993', - source: '23', - target: '30', - }, - { - id: 'edge-514', - source: '23', - target: '31', - }, - { - id: 'edge-361', - source: '23', - target: '33', - }, - { - id: 'edge-154', - source: '32', - target: '33', - }, - ], -}; - -data.nodes.forEach((node) => (node.data.size = Math.random() * 30 + 5)); - -const graph = new Graph({ - container: 'container', - data, - node: { - style: { - type: 'circle', - size: (d) => d.data.size, - labelText: (d) => d.id, - ports: [], - }, - palette: { - type: 'group', - field: 'cluster', - color: 'antv', - }, - }, - layout: { - type: 'force', - linkDistance: 50, - animation: true, - clustering: true, - nodeClusterBy: 'cluster', - clusterNodeStrength: 70, - }, - - behaviors: ['zoom-canvas', 'drag-canvas'], - zoomRange: [0.1, 5], - autoResize: true, -}); - -graph.render(); diff --git a/packages/site/examples/layout/forceDirected/demo/forceDirectedConfigurationTranslate.js b/packages/site/examples/layout/forceDirected/demo/forceDirectedConfigurationTranslate.js deleted file mode 100644 index acbd31f3be..0000000000 --- a/packages/site/examples/layout/forceDirected/demo/forceDirectedConfigurationTranslate.js +++ /dev/null @@ -1,551 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - data: { - label: '0', - }, - }, - { - id: '1', - data: { - label: '1', - }, - }, - { - id: '2', - data: { - label: '2', - }, - }, - { - id: '3', - data: { - label: '3', - }, - }, - { - id: '4', - data: { - label: '4', - }, - }, - { - id: '5', - data: { - label: '5', - }, - }, - { - id: '6', - data: { - label: '6', - }, - }, - { - id: '7', - data: { - label: '7', - }, - }, - { - id: '8', - data: { - label: '8', - }, - }, - { - id: '9', - data: { - label: '9', - }, - }, - { - id: '10', - data: { - label: '10', - }, - }, - { - id: '11', - data: { - label: '11', - }, - }, - { - id: '12', - data: { - label: '12', - }, - }, - { - id: '13', - data: { - label: '13', - }, - }, - { - id: '14', - data: { - label: '14', - }, - }, - { - id: '15', - data: { - label: '15', - }, - }, - { - id: '16', - data: { - label: '16', - }, - }, - { - id: '17', - data: { - label: '17', - }, - }, - { - id: '18', - data: { - label: '18', - }, - }, - { - id: '19', - data: { - label: '19', - }, - }, - { - id: '20', - data: { - label: '20', - }, - }, - { - id: '21', - data: { - label: '21', - }, - }, - { - id: '22', - data: { - label: '22', - }, - }, - { - id: '23', - data: { - label: '23', - }, - }, - { - id: '24', - data: { - label: '24', - }, - }, - { - id: '25', - data: { - label: '25', - }, - }, - { - id: '26', - data: { - label: '26', - }, - }, - { - id: '27', - data: { - label: '27', - }, - }, - { - id: '28', - data: { - label: '28', - }, - }, - { - id: '29', - data: { - label: '29', - }, - }, - { - id: '30', - data: { - label: '30', - }, - }, - { - id: '31', - data: { - label: '31', - }, - }, - { - id: '32', - data: { - label: '32', - }, - }, - { - id: '33', - data: { - label: '33', - }, - }, - ], - edges: [ - { - id: 'edge-442', - source: '0', - target: '1', - }, - { - id: 'edge-825', - source: '0', - target: '2', - }, - { - id: 'edge-100', - source: '0', - target: '3', - }, - { - id: 'edge-378', - source: '0', - target: '4', - }, - { - id: 'edge-691', - source: '0', - target: '5', - }, - { - id: 'edge-983', - source: '0', - target: '7', - }, - { - id: 'edge-491', - source: '0', - target: '8', - }, - { - id: 'edge-38', - source: '0', - target: '9', - }, - { - id: 'edge-547', - source: '0', - target: '10', - }, - { - id: 'edge-126', - source: '0', - target: '11', - }, - { - id: 'edge-905', - source: '0', - target: '13', - }, - { - id: 'edge-931', - source: '0', - target: '14', - }, - { - id: 'edge-329', - source: '0', - target: '15', - }, - { - id: 'edge-798', - source: '0', - target: '16', - }, - { - id: 'edge-130', - source: '2', - target: '3', - }, - { - id: 'edge-132', - source: '4', - target: '5', - }, - { - id: 'edge-587', - source: '4', - target: '6', - }, - { - id: 'edge-772', - source: '5', - target: '6', - }, - { - id: 'edge-582', - source: '7', - target: '13', - }, - { - id: 'edge-922', - source: '8', - target: '14', - }, - { - id: 'edge-559', - source: '9', - target: '10', - }, - { - id: 'edge-915', - source: '10', - target: '22', - }, - { - id: 'edge-304', - source: '10', - target: '14', - }, - { - id: 'edge-88', - source: '10', - target: '12', - }, - { - id: 'edge-343', - source: '10', - target: '24', - }, - { - id: 'edge-692', - source: '10', - target: '21', - }, - { - id: 'edge-29', - source: '10', - target: '20', - }, - { - id: 'edge-390', - source: '11', - target: '24', - }, - { - id: 'edge-46', - source: '11', - target: '22', - }, - { - id: 'edge-170', - source: '11', - target: '14', - }, - { - id: 'edge-51', - source: '12', - target: '13', - }, - { - id: 'edge-387', - source: '16', - target: '17', - }, - { - id: 'edge-598', - source: '16', - target: '18', - }, - { - id: 'edge-894', - source: '16', - target: '21', - }, - { - id: 'edge-448', - source: '16', - target: '22', - }, - { - id: 'edge-921', - source: '17', - target: '18', - }, - { - id: 'edge-374', - source: '17', - target: '20', - }, - { - id: 'edge-11', - source: '18', - target: '19', - }, - { - id: 'edge-899', - source: '19', - target: '20', - }, - { - id: 'edge-790', - source: '19', - target: '33', - }, - { - id: 'edge-294', - source: '19', - target: '22', - }, - { - id: 'edge-353', - source: '19', - target: '23', - }, - { - id: 'edge-546', - source: '20', - target: '21', - }, - { - id: 'edge-105', - source: '21', - target: '22', - }, - { - id: 'edge-261', - source: '22', - target: '24', - }, - { - id: 'edge-393', - source: '22', - target: '25', - }, - { - id: 'edge-779', - source: '22', - target: '26', - }, - { - id: 'edge-149', - source: '22', - target: '23', - }, - { - id: 'edge-313', - source: '22', - target: '28', - }, - { - id: 'edge-805', - source: '22', - target: '30', - }, - { - id: 'edge-538', - source: '22', - target: '31', - }, - { - id: 'edge-884', - source: '22', - target: '32', - }, - { - id: 'edge-824', - source: '22', - target: '33', - }, - { - id: 'edge-519', - source: '23', - target: '28', - }, - { - id: 'edge-496', - source: '23', - target: '27', - }, - { - id: 'edge-402', - source: '23', - target: '29', - }, - { - id: 'edge-736', - source: '23', - target: '30', - }, - { - id: 'edge-782', - source: '23', - target: '31', - }, - { - id: 'edge-87', - source: '23', - target: '33', - }, - { - id: 'edge-27', - source: '32', - target: '33', - }, - ], -}; - -const container = document.getElementById('container'); -const descriptionDiv = document.createElement('div'); -descriptionDiv.innerHTML = 'Force layout, linkDistance = 50, preventOverlap: false'; -container.appendChild(descriptionDiv); - -const width = container.scrollWidth; -const height = (container.scrollHeight || 500) - 30; -const graph = new Graph({ - container: 'container', - width, - height, - data, - node: (model) => { - return { - id: model.id, - labelText: (d) => model.data.label, - }; - }, - layout: { - type: 'force', - linkDistance: 50, - animation: true, - }, - behaviors: ['zoom-canvas', 'drag-canvas'], -}); - -setTimeout(() => { - descriptionDiv.innerHTML = 'Force layout, linkDistance = 100, preventOverlap: true'; - graph.layout({ - type: 'force', - linkDistance: 100, - preventOverlap: true, - nodeSize: 20, - animation: true, - }); -}, 5000); - -graph.render(); diff --git a/packages/site/examples/layout/forceDirected/demo/forceDirectedFunctionalParams.js b/packages/site/examples/layout/forceDirected/demo/forceDirectedFunctionalParams.js deleted file mode 100644 index 580a25f816..0000000000 --- a/packages/site/examples/layout/forceDirected/demo/forceDirectedFunctionalParams.js +++ /dev/null @@ -1,65 +0,0 @@ -import { Graph } from '@antv/g6'; - -const graph = new Graph({ - container: 'container', - data: { - nodes: [ - { id: 'node0', size: 50 }, - { id: 'node1', size: 30 }, - { id: 'node2', size: 30 }, - { id: 'node3', size: 30 }, - { id: 'node4', size: 30, isLeaf: true }, - { id: 'node5', size: 30, isLeaf: true }, - { id: 'node6', size: 15, isLeaf: true }, - { id: 'node7', size: 15, isLeaf: true }, - { id: 'node8', size: 15, isLeaf: true }, - { id: 'node9', size: 15, isLeaf: true }, - { id: 'node10', size: 15, isLeaf: true }, - { id: 'node11', size: 15, isLeaf: true }, - { id: 'node12', size: 15, isLeaf: true }, - { id: 'node13', size: 15, isLeaf: true }, - { id: 'node14', size: 15, isLeaf: true }, - { id: 'node15', size: 15, isLeaf: true }, - { id: 'node16', size: 15, isLeaf: true }, - ], - edges: [ - { source: 'node0', target: 'node1' }, - { source: 'node0', target: 'node2' }, - { source: 'node0', target: 'node3' }, - { source: 'node0', target: 'node4' }, - { source: 'node0', target: 'node5' }, - { source: 'node1', target: 'node6' }, - { source: 'node1', target: 'node7' }, - { source: 'node2', target: 'node8' }, - { source: 'node2', target: 'node9' }, - { source: 'node2', target: 'node10' }, - { source: 'node2', target: 'node11' }, - { source: 'node2', target: 'node12' }, - { source: 'node2', target: 'node13' }, - { source: 'node3', target: 'node14' }, - { source: 'node3', target: 'node15' }, - { source: 'node3', target: 'node16' }, - ], - }, - node: { - style: { - size: (d) => d.size, - }, - }, - layout: { - type: 'force', - preventOverlap: true, - animation: true, - linkDistance: (d) => { - if (d.source === 'node0' || d.target === 'node0') { - return 200; - } - return 80; - }, - }, - behaviors: ['zoom-canvas', 'drag-canvas'], - autoResize: true, - zoomRange: [0.1, 5], -}); - -graph.render(); diff --git a/packages/site/examples/layout/forceDirected/demo/meta.json b/packages/site/examples/layout/forceDirected/demo/meta.json deleted file mode 100644 index ef942f90aa..0000000000 --- a/packages/site/examples/layout/forceDirected/demo/meta.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "title": { - "zh": "中文分类", - "en": "Category" - }, - "demos": [ - { - "filename": "basicForce.js", - "title": { - "zh": "Force 聚类及固定拖拽节点", - "en": "Clustering Force Layout with dragging" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sA14SZo9BBMAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "basicFA2.js", - "title": { - "zh": "基本 Force Atlas 2", - "en": "Basic Force-Atlas 2 Layout" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-HgiS6CyuuEAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "forceDirectedFunctionalParams.js", - "title": { - "zh": "定制不同节点的参数", - "en": "Different Configurations for Nodes" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xQRmQ7pTvZMAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "forceDirectedConfigurationTranslate.js", - "title": { - "zh": "力导向布局参数动态变化", - "en": "Update Configurations for Force-directed Layout" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2HKeQqGwjQoAAAAAAAAAAAAADmJ7AQ/original" - } - ] -} diff --git a/packages/site/examples/layout/forceDirected/index.en.md b/packages/site/examples/layout/forceDirected/index.en.md deleted file mode 100644 index 26cde8d333..0000000000 --- a/packages/site/examples/layout/forceDirected/index.en.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Force-directed Layout -order: 0 ---- - -Force-directed layout is a set of algorithms which are imporved and extended by lots of researchers based on the earliest classical force-directed algorithm. They simulate the nodes and edges in the graph as the physical objects. There are attractive forces and repulsive forces between nodes to iteratively move them to reach a reasonable layout. - -## Usage - -The classical force-directed layout in G6 comes from d3.js. As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/sub-layout). - -- Example 1 : Basic force-directed layout and dragging interactions. -- Example 2 : Prevent node overlappings. -- Example 3 : Adjust the link distances and forces for different nodes. -- Example 4 : Fix the dragged node. -- Example 5 : Translate the layout parameters in dynamic. -- Example 6 : The bubbles layout and interactions. -- Example 7 : Constrain the layout in a certain area. diff --git a/packages/site/examples/layout/forceDirected/index.zh.md b/packages/site/examples/layout/forceDirected/index.zh.md deleted file mode 100644 index 01a067fe06..0000000000 --- a/packages/site/examples/layout/forceDirected/index.zh.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: 力导向图布局 -order: 0 ---- - -力导向图布局作为较早被发明的一种实际应用布局算法，经过研究者多年改进、扩展，已发展成为一类算法的集合。该类算法的特点是模拟物理世界中的作用力，施加在节点上，并迭代计算以达到合理放置节点、美观布局的一类算法。 - -## 使用指南 - -G6 内置的经典力导向算法引用了 d3.js 的力导向算法。如下面代码所示，可在实例化 Graph 时使用该布局。除此之外，还可以如[子图布局](/zh/docs/manual/middle/layout/sub-layout)所示单独使用布局。 - -- 代码演示 1 ：基础的经典力导向布局及节点的拖拽。 -- 代码演示 2 ：节点不重叠。 -- 代码演示 3 ：为不同节点调整边长和力。 -- 代码演示 4 ：固定被拖拽的节点。 -- 代码演示 5 ：支持布局参数的动态切换。 -- 代码演示 6 ：使用力导向算法实现气泡效果及交互。 -- 代码演示 7 ：约束在一定范围内进行力导向布局。 diff --git a/packages/site/examples/layout/fruchterman/demo/basic.js b/packages/site/examples/layout/fruchterman/demo/basic.js new file mode 100644 index 0000000000..2fc33b52bc --- /dev/null +++ b/packages/site/examples/layout/fruchterman/demo/basic.js @@ -0,0 +1,32 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/cluster.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + layout: { + type: 'fruchterman', + gravity: 5, + speed: 5, + animated: true, + }, + node: { + style: { + size: 20, + labelPlacement: 'center', + labelText: (d) => d.id, + labelBackground: false, + }, + palette: { + type: 'group', + field: 'cluster', + }, + }, + animation: true, + behaviors: ['drag-canvas', 'drag-element'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/fruchterman/demo/cluster.js b/packages/site/examples/layout/fruchterman/demo/cluster.js new file mode 100644 index 0000000000..4481bac0cd --- /dev/null +++ b/packages/site/examples/layout/fruchterman/demo/cluster.js @@ -0,0 +1,38 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/cluster.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + layout: { + type: 'fruchterman', + gravity: 10, + speed: 5, + clustering: true, + nodeClusterBy: 'cluster', + }, + node: { + style: { + size: 20, + labelPlacement: 'center', + labelText: (d) => d.id, + labelBackground: false, + }, + palette: { + type: 'group', + field: 'cluster', + }, + }, + edge: { + style: { + endArrow: true, + }, + }, + behaviors: ['drag-canvas', 'drag-element'], + animation: true, + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/fruchtermanLayout/demo/meta.json b/packages/site/examples/layout/fruchterman/demo/meta.json similarity index 65% rename from packages/site/examples/layout/fruchtermanLayout/demo/meta.json rename to packages/site/examples/layout/fruchterman/demo/meta.json index 03c24f63f9..5e96f4a159 100644 --- a/packages/site/examples/layout/fruchtermanLayout/demo/meta.json +++ b/packages/site/examples/layout/fruchterman/demo/meta.json @@ -5,7 +5,7 @@ }, "demos": [ { - "filename": "basicFruchterman.ts", + "filename": "basic.js", "title": { "zh": "基本 Fruchterman 布局", "en": "Basic Fruchterman Layout" @@ -13,7 +13,7 @@ "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*1KY7SLEXxqMAAAAAAAAAAABkARQnAQ" }, { - "filename": "fruchtermanCluster.ts", + "filename": "cluster.js", "title": { "zh": "基本 Fruchterman 布局", "en": "Basic Fruchterman Layout" @@ -21,20 +21,20 @@ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-s9CTphuwgcAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "fruchtermanWebWorker.ts", + "filename": "run-in-web-worker.js", "title": { - "zh": "Fruchterman 使用 Web-worker", - "en": "Fruchterman with Web-worker" + "zh": "使用 Web-worker", + "en": "Run in Web-worker" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3gn9TZ3oUoIAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "fruchtermanFix.ts", + "filename": "run-in-gpu.js", "title": { - "zh": "Fruchterman 固定被拖拽的节点", - "en": "Fruchterman with Fixing Dragged Nodes" + "zh": "使用 GPU 加速", + "en": "Run in GPU" }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sbvuTbp3L6sAAAAAAAAAAAAADmJ7AQ/original" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SmXBQ6fv8PoAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/packages/site/examples/layout/gpuLayout/demo/fruchtermanComplexData.ts b/packages/site/examples/layout/fruchterman/demo/run-in-gpu.js similarity index 71% rename from packages/site/examples/layout/gpuLayout/demo/fruchtermanComplexData.ts rename to packages/site/examples/layout/fruchterman/demo/run-in-gpu.js index d9d0a6f18d..f2a7bb6b68 100644 --- a/packages/site/examples/layout/gpuLayout/demo/fruchtermanComplexData.ts +++ b/packages/site/examples/layout/fruchterman/demo/run-in-gpu.js @@ -1,7 +1,6 @@ import { Graph, register } from '@antv/g6'; import { FruchtermanLayout } from '@antv/layout-gpu'; -// Resister the layout into G6. register('layout', 'fruchterman-gpu', FruchtermanLayout); fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4b9bcbc25f.json') @@ -17,15 +16,17 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4 }, edge: { style: { - opacity: 0.5, - endArrow: true, - endArrowSize: 2, + startArrow: true, }, }, layout: { - type: 'fruchterman-gpu', + type: 'fruchterman', + speed: 20, + gravity: 1, + maxIteration: 10000, + workerEnabled: true, }, - behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'], + behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'], }); graph.render(); diff --git a/packages/site/examples/layout/fruchterman/demo/run-in-web-worker.js b/packages/site/examples/layout/fruchterman/demo/run-in-web-worker.js new file mode 100644 index 0000000000..b66cfe897a --- /dev/null +++ b/packages/site/examples/layout/fruchterman/demo/run-in-web-worker.js @@ -0,0 +1,43 @@ +import { Graph, GraphEvent } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/cluster.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + layout: { + type: 'fruchterman', + speed: 20, + gravity: 10, + maxIteration: 10000, + workerEnabled: true, + }, + node: { + style: { + size: 20, + labelText: (d) => d.id, + labelPlacement: 'center', + }, + palette: { + type: 'group', + field: 'cluster', + }, + }, + edge: { + style: { + stroke: '#ddd', + }, + }, + behaviors: ['drag-canvas', 'drag-element'], + }); + + graph.render(); + + window.addPanel((gui) => { + const msg = gui.add({ msg: 'Running...' }, 'msg').name('Tips').disable(); + graph.on(GraphEvent.AFTER_LAYOUT, () => { + msg.setValue('Layout Done!'); + }); + }); + }); diff --git a/packages/site/examples/layout/fruchterman/index.en.md b/packages/site/examples/layout/fruchterman/index.en.md new file mode 100644 index 0000000000..729bb464f1 --- /dev/null +++ b/packages/site/examples/layout/fruchterman/index.en.md @@ -0,0 +1,4 @@ +--- +title: Fruchterman Layout +order: 13 +--- diff --git a/packages/site/examples/layout/fruchterman/index.zh.md b/packages/site/examples/layout/fruchterman/index.zh.md new file mode 100644 index 0000000000..ca0825d254 --- /dev/null +++ b/packages/site/examples/layout/fruchterman/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Fruchterman 图布局 +order: 13 +--- diff --git a/packages/site/examples/layout/fruchtermanLayout/API.en.md b/packages/site/examples/layout/fruchtermanLayout/API.en.md deleted file mode 100644 index fb3b1b21ce..0000000000 --- a/packages/site/examples/layout/fruchtermanLayout/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/fruchtermanLayout/API.zh.md b/packages/site/examples/layout/fruchtermanLayout/API.zh.md deleted file mode 100644 index 5a5fd2e2a8..0000000000 --- a/packages/site/examples/layout/fruchtermanLayout/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanCluster.ts b/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanCluster.ts deleted file mode 100644 index 3b20d6cd1a..0000000000 --- a/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanCluster.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { id: '0', data: { cluster: 'a' } }, - { id: '1', data: { cluster: 'a' } }, - { id: '2', data: { cluster: 'a' } }, - { id: '3', data: { cluster: 'a' } }, - { id: '4', data: { cluster: 'a' } }, - { id: '5', data: { cluster: 'a' } }, - { id: '6', data: { cluster: 'a' } }, - { id: '7', data: { cluster: 'a' } }, - { id: '8', data: { cluster: 'a' } }, - { id: '9', data: { cluster: 'a' } }, - { id: '10', data: { cluster: 'a' } }, - { id: '11', data: { cluster: 'a' } }, - { id: '12', data: { cluster: 'a' } }, - { id: '13', data: { cluster: 'b' } }, - { id: '14', data: { cluster: 'b' } }, - { id: '15', data: { cluster: 'b' } }, - { id: '16', data: { cluster: 'b' } }, - { id: '17', data: { cluster: 'b' } }, - { id: '18', data: { cluster: 'c' } }, - { id: '19', data: { cluster: 'c' } }, - { id: '20', data: { cluster: 'c' } }, - { id: '21', data: { cluster: 'c' } }, - { id: '22', data: { cluster: 'c' } }, - { id: '23', data: { cluster: 'c' } }, - { id: '24', data: { cluster: 'c' } }, - { id: '25', data: { cluster: 'c' } }, - { id: '26', data: { cluster: 'c' } }, - { id: '27', data: { cluster: 'c' } }, - { id: '28', data: { cluster: 'c' } }, - { id: '29', data: { cluster: 'c' } }, - { id: '30', data: { cluster: 'c' } }, - { id: '31', data: { cluster: 'd' } }, - { id: '32', data: { cluster: 'd' } }, - { id: '33', data: { cluster: 'd' } }, - ], - edges: [ - { source: '0', target: '1' }, - { source: '0', target: '2' }, - { source: '0', target: '3' }, - { source: '0', target: '4' }, - { source: '0', target: '5' }, - { source: '0', target: '7' }, - { source: '0', target: '8' }, - { source: '0', target: '9' }, - { source: '0', target: '10' }, - { source: '0', target: '11' }, - { source: '0', target: '13' }, - { source: '0', target: '14' }, - { source: '0', target: '15' }, - { source: '0', target: '16' }, - { source: '2', target: '3' }, - { source: '4', target: '5' }, - { source: '4', target: '6' }, - { source: '5', target: '6' }, - { source: '7', target: '13' }, - { source: '8', target: '14' }, - { source: '9', target: '10' }, - { source: '10', target: '22' }, - { source: '10', target: '14' }, - { source: '10', target: '12' }, - { source: '10', target: '24' }, - { source: '10', target: '21' }, - { source: '10', target: '20' }, - { source: '11', target: '24' }, - { source: '11', target: '22' }, - { source: '11', target: '14' }, - { source: '12', target: '13' }, - { source: '16', target: '17' }, - { source: '16', target: '18' }, - { source: '16', target: '21' }, - { source: '16', target: '22' }, - { source: '17', target: '18' }, - { source: '17', target: '20' }, - { source: '18', target: '19' }, - { source: '19', target: '20' }, - { source: '19', target: '33' }, - { source: '19', target: '22' }, - { source: '19', target: '23' }, - { source: '20', target: '21' }, - { source: '21', target: '22' }, - { source: '22', target: '24' }, - { source: '22', target: '25' }, - { source: '22', target: '26' }, - { source: '22', target: '23' }, - { source: '22', target: '28' }, - { source: '22', target: '30' }, - { source: '22', target: '31' }, - { source: '22', target: '32' }, - { source: '22', target: '33' }, - { source: '23', target: '28' }, - { source: '23', target: '27' }, - { source: '23', target: '29' }, - { source: '23', target: '30' }, - { source: '23', target: '31' }, - { source: '23', target: '33' }, - { source: '32', target: '33' }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'fruchterman', - gravity: 10, - speed: 5, - clustering: true, - nodeClusterBy: 'cluster', - }, - node: { - style: { - size: 20, - stroke: '#5B8FF9', - fill: '#C6E5FF', - lineWidth: 1, - labelPlacement: 'center', - labelText: (d) => d.id, - labelBackground: false, - }, - }, - edge: { - style: { - endArrow: true, - endArrowPath: 'M 0,0 L 4,2 L 4,-2 Z', - }, - }, - behaviors: ['drag-canvas', 'drag-element'], - animation: true, -}); - -graph.render(); diff --git a/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanFix.ts b/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanFix.ts deleted file mode 100644 index ccf6f9b5b4..0000000000 --- a/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanFix.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { Graph } from '@antv/g6'; - -fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json') - .then((res) => res.json()) - .then((data) => { - const graph = new Graph({ - container: 'container', - data, - node: { - style: { - size: 15, - stroke: '#5B8FF9', - fill: '#C6E5FF', - lineWidth: 1, - }, - }, - edge: { - style: { - stroke: '#E2E2E2', - }, - }, - layout: { - type: 'fruchterman', - speed: 50, - gravity: 1, - animated: true, - maxIteration: 500, - }, - behaviors: ['drag-canvas', 'drag-element'], - animation: true, - }); - - graph.render(); - - graph.on('node:dragstart', function () { - graph.stopLayout(); - }); - graph.on('node:dragend', () => { - graph.layout(); - }); - }); diff --git a/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanWebWorker.ts b/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanWebWorker.ts deleted file mode 100644 index 9b67edac2f..0000000000 --- a/packages/site/examples/layout/fruchtermanLayout/demo/fruchtermanWebWorker.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Graph } from '@antv/g6'; - -const container = document.getElementById('container'); -const descriptionDiv = document.createElement('div'); -descriptionDiv.innerHTML = 'Doing layout... web-worker is enabled in this demo, so the layout will not block the page.'; -container.appendChild(descriptionDiv); - -fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4b9bcbc25f.json') - .then((res) => res.json()) - .then((data) => { - const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'fruchterman', - speed: 20, - gravity: 1, - maxIteration: 10000, - workerEnabled: true, - }, - node: { - style: { - size: 6, - }, - }, - edge: { - style: { - stroke: '#ddd', - }, - }, - behaviors: ['drag-canvas', 'drag-element'], - }); - - graph.render(); - - graph.on('afterlayout', () => { - descriptionDiv.innerHTML = 'Layout in Worker, Done!'; - }); - }); diff --git a/packages/site/examples/layout/fruchtermanLayout/index.en.md b/packages/site/examples/layout/fruchtermanLayout/index.en.md deleted file mode 100644 index 4ea215a2d0..0000000000 --- a/packages/site/examples/layout/fruchtermanLayout/index.en.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Fruchterman Layout -order: 13 ---- - -Fruchterman Reingold Layout is a kind of force-directed layout in theory. The differences are the definitions of attracitve force and repulsive force. - -## Usage - -As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/sub-layout). By tuning the parameters, you can adjust the iteration number, layout compactness, layout by clusters, and so on. - -- Example 1 : Basic Fruchterman layout. -- Example 2 : Fruchterman clustering layout. -- Example 3 : Translate the layout parameters in dynamic. -- Example 4 : Fruchterman layout with web-worker in case layout calculation takes too long to block page interaction. diff --git a/packages/site/examples/layout/fruchtermanLayout/index.zh.md b/packages/site/examples/layout/fruchtermanLayout/index.zh.md deleted file mode 100644 index cbc53eb600..0000000000 --- a/packages/site/examples/layout/fruchtermanLayout/index.zh.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Fruchterman 图布局 -order: 13 ---- - -Fruchterman Reingold 布局算法在原理上而言属于力导向布局算法。其引力与斥力的定义方式与经典的 Force Diected 力导向图布局有少许不同。 - -## 使用指南 - -G6 内置的 Fruchterman 布局可在实例化 Graph 时使用该布局。除此之外，还可以如[子图布局](/zh/docs/manual/middle/layout/sub-layout)所示单独使用布局。该布局可以通过配置调整迭代次数、紧凑程度、是否按照聚类布局等。 - -- 代码演示 1 ：基本的 Fruchterman 布局。 -- 代码演示 2 ：Fruchterman 的聚类布局。 -- 代码演示 3 ：Fruchterman 布局参数动态变化。 -- 代码演示 4 ：Fruchterman 使用 web-worker 以避免阻塞页面。 diff --git a/packages/site/examples/layout/gpuLayout/API.en.md b/packages/site/examples/layout/gpuLayout/API.en.md deleted file mode 100644 index a2253244c4..0000000000 --- a/packages/site/examples/layout/gpuLayout/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/gpuLayout/API.zh.md b/packages/site/examples/layout/gpuLayout/API.zh.md deleted file mode 100644 index 811034462b..0000000000 --- a/packages/site/examples/layout/gpuLayout/API.zh.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: API ---- - -G6 4.0 推出两种支持 GPU 布局： - -- gforce：全新内置布局，实现了经典的力导向算法； -- fruchterman：另一种力导向的变种算法，CPU 版本在之前的版本就已经存在，G6 4.0 支持使用 GPU 并行计算该算法。 - -由于 GPU 与 CPU 通信的拷贝效率原因，在小规模图上 GPU 版本的布局提升不大，甚至可能更慢。但在较大、大规模图上，计算性能大大提升，升至超过 CPU 的百倍。下面两张表格对比了两个算法在不同数据规模、不同算法下 GPU 与 CPU 的计算时间： - - diff --git a/packages/site/examples/layout/gpuLayout/demo/basicFruchterman.ts b/packages/site/examples/layout/gpuLayout/demo/basicFruchterman.ts deleted file mode 100644 index df156f24d1..0000000000 --- a/packages/site/examples/layout/gpuLayout/demo/basicFruchterman.ts +++ /dev/null @@ -1,569 +0,0 @@ -import { Graph, register } from '@antv/g6'; -import { FruchtermanLayout } from '@antv/layout-gpu'; - -// Resister the layout into G6. -register('layout', 'fruchterman-gpu', FruchtermanLayout); - -const data = { - nodes: [ - { - id: '0', - data: { - label: '0', - cluster: 'a', - }, - }, - { - id: '1', - data: { - label: '1', - cluster: 'a', - }, - }, - { - id: '2', - data: { - label: '2', - cluster: 'a', - }, - }, - { - id: '3', - data: { - label: '3', - cluster: 'a', - }, - }, - { - id: '4', - data: { - label: '4', - cluster: 'a', - }, - }, - { - id: '5', - data: { - label: '5', - cluster: 'a', - }, - }, - { - id: '6', - data: { - label: '6', - cluster: 'a', - }, - }, - { - id: '7', - data: { - label: '7', - cluster: 'a', - }, - }, - { - id: '8', - data: { - label: '8', - cluster: 'a', - }, - }, - { - id: '9', - data: { - label: '9', - cluster: 'a', - }, - }, - { - id: '10', - data: { - label: '10', - cluster: 'a', - }, - }, - { - id: '11', - data: { - label: '11', - cluster: 'a', - }, - }, - { - id: '12', - data: { - label: '12', - cluster: 'a', - }, - }, - { - id: '13', - data: { - label: '13', - cluster: 'b', - }, - }, - { - id: '14', - data: { - label: '14', - cluster: 'b', - }, - }, - { - id: '15', - data: { - label: '15', - cluster: 'b', - }, - }, - { - id: '16', - data: { - label: '16', - cluster: 'b', - }, - }, - { - id: '17', - data: { - label: '17', - cluster: 'b', - }, - }, - { - id: '18', - data: { - label: '18', - cluster: 'c', - }, - }, - { - id: '19', - data: { - label: '19', - cluster: 'c', - }, - }, - { - id: '20', - data: { - label: '20', - cluster: 'c', - }, - }, - { - id: '21', - data: { - label: '21', - cluster: 'c', - }, - }, - { - id: '22', - data: { - label: '22', - cluster: 'c', - }, - }, - { - id: '23', - data: { - label: '23', - cluster: 'c', - }, - }, - { - id: '24', - data: { - label: '24', - cluster: 'c', - }, - }, - { - id: '25', - data: { - label: '25', - cluster: 'c', - }, - }, - { - id: '26', - data: { - label: '26', - cluster: 'c', - }, - }, - { - id: '27', - data: { - label: '27', - cluster: 'c', - }, - }, - { - id: '28', - data: { - label: '28', - cluster: 'c', - }, - }, - { - id: '29', - data: { - label: '29', - cluster: 'c', - }, - }, - { - id: '30', - data: { - label: '30', - cluster: 'c', - }, - }, - { - id: '31', - data: { - label: '31', - cluster: 'd', - }, - }, - { - id: '32', - data: { - label: '32', - cluster: 'd', - }, - }, - { - id: '33', - data: { - label: '33', - cluster: 'd', - }, - }, - ], - edges: [ - { - id: 'edge-997', - source: '0', - target: '1', - }, - { - id: 'edge-631', - source: '0', - target: '2', - }, - { - id: 'edge-852', - source: '0', - target: '3', - }, - { - id: 'edge-757', - source: '0', - target: '4', - }, - { - id: 'edge-912', - source: '0', - target: '5', - }, - { - id: 'edge-780', - source: '0', - target: '7', - }, - { - id: 'edge-497', - source: '0', - target: '8', - }, - { - id: 'edge-506', - source: '0', - target: '9', - }, - { - id: 'edge-650', - source: '0', - target: '10', - }, - { - id: 'edge-145', - source: '0', - target: '11', - }, - { - id: 'edge-91', - source: '0', - target: '13', - }, - { - id: 'edge-838', - source: '0', - target: '14', - }, - { - id: 'edge-183', - source: '0', - target: '15', - }, - { - id: 'edge-540', - source: '0', - target: '16', - }, - { - id: 'edge-569', - source: '2', - target: '3', - }, - { - id: 'edge-131', - source: '4', - target: '5', - }, - { - id: 'edge-875', - source: '4', - target: '6', - }, - { - id: 'edge-189', - source: '5', - target: '6', - }, - { - id: 'edge-295', - source: '7', - target: '13', - }, - { - id: 'edge-927', - source: '8', - target: '14', - }, - { - id: 'edge-519', - source: '9', - target: '10', - }, - { - id: 'edge-411', - source: '10', - target: '22', - }, - { - id: 'edge-430', - source: '10', - target: '14', - }, - { - id: 'edge-61', - source: '10', - target: '12', - }, - { - id: 'edge-812', - source: '10', - target: '24', - }, - { - id: 'edge-957', - source: '10', - target: '21', - }, - { - id: 'edge-588', - source: '10', - target: '20', - }, - { - id: 'edge-249', - source: '11', - target: '24', - }, - { - id: 'edge-814', - source: '11', - target: '22', - }, - { - id: 'edge-596', - source: '11', - target: '14', - }, - { - id: 'edge-664', - source: '12', - target: '13', - }, - { - id: 'edge-556', - source: '16', - target: '17', - }, - { - id: 'edge-254', - source: '16', - target: '18', - }, - { - id: 'edge-376', - source: '16', - target: '21', - }, - { - id: 'edge-813', - source: '16', - target: '22', - }, - { - id: 'edge-262', - source: '17', - target: '18', - }, - { - id: 'edge-287', - source: '17', - target: '20', - }, - { - id: 'edge-874', - source: '18', - target: '19', - }, - { - id: 'edge-395', - source: '19', - target: '20', - }, - { - id: 'edge-26', - source: '19', - target: '33', - }, - { - id: 'edge-890', - source: '19', - target: '22', - }, - { - id: 'edge-795', - source: '19', - target: '23', - }, - { - id: 'edge-59', - source: '20', - target: '21', - }, - { - id: 'edge-878', - source: '21', - target: '22', - }, - { - id: 'edge-585', - source: '22', - target: '24', - }, - { - id: 'edge-27', - source: '22', - target: '25', - }, - { - id: 'edge-578', - source: '22', - target: '26', - }, - { - id: 'edge-113', - source: '22', - target: '23', - }, - { - id: 'edge-65', - source: '22', - target: '28', - }, - { - id: 'edge-133', - source: '22', - target: '30', - }, - { - id: 'edge-512', - source: '22', - target: '31', - }, - { - id: 'edge-728', - source: '22', - target: '32', - }, - { - id: 'edge-150', - source: '22', - target: '33', - }, - { - id: 'edge-30', - source: '23', - target: '28', - }, - { - id: 'edge-839', - source: '23', - target: '27', - }, - { - id: 'edge-572', - source: '23', - target: '29', - }, - { - id: 'edge-29', - source: '23', - target: '30', - }, - { - id: 'edge-811', - source: '23', - target: '31', - }, - { - id: 'edge-653', - source: '23', - target: '33', - }, - { - id: 'edge-53', - source: '32', - target: '33', - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - - edge: { - style: { - startArrow: true, - }, - }, - layout: { - type: 'fruchterman-gpu', - speed: 10, - maxIteration: 2000, - }, - behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/gpuLayout/demo/basicGForce.js b/packages/site/examples/layout/gpuLayout/demo/basicGForce.js deleted file mode 100644 index 865162d4a9..0000000000 --- a/packages/site/examples/layout/gpuLayout/demo/basicGForce.js +++ /dev/null @@ -1,585 +0,0 @@ -// TODO: disable this demo temporary since gForce is not correct. - -import { Graph, extend } from '@antv/g6'; -import * as layoutGPU from '@antv/layout-gpu'; - -// GPU layout is not built-in G6 stbLib, you need to extend G6 with it. -const CustomGraph = extend(Graph, { - layouts: { - 'gForce-gpu': layoutGPU.GForceLayout, - }, -}); - -const data = { - nodes: [ - { - id: '0', - data: { - label: '0', - cluster: 'a', - }, - }, - { - id: '1', - data: { - label: '1', - cluster: 'a', - }, - }, - { - id: '2', - data: { - label: '2', - cluster: 'a', - }, - }, - { - id: '3', - data: { - label: '3', - cluster: 'a', - }, - }, - { - id: '4', - data: { - label: '4', - cluster: 'a', - }, - }, - { - id: '5', - data: { - label: '5', - cluster: 'a', - }, - }, - { - id: '6', - data: { - label: '6', - cluster: 'a', - }, - }, - { - id: '7', - data: { - label: '7', - cluster: 'a', - }, - }, - { - id: '8', - data: { - label: '8', - cluster: 'a', - }, - }, - { - id: '9', - data: { - label: '9', - cluster: 'a', - }, - }, - { - id: '10', - data: { - label: '10', - cluster: 'a', - }, - }, - { - id: '11', - data: { - label: '11', - cluster: 'a', - }, - }, - { - id: '12', - data: { - label: '12', - cluster: 'a', - }, - }, - { - id: '13', - data: { - label: '13', - cluster: 'b', - }, - }, - { - id: '14', - data: { - label: '14', - cluster: 'b', - }, - }, - { - id: '15', - data: { - label: '15', - cluster: 'b', - }, - }, - { - id: '16', - data: { - label: '16', - cluster: 'b', - }, - }, - { - id: '17', - data: { - label: '17', - cluster: 'b', - }, - }, - { - id: '18', - data: { - label: '18', - cluster: 'c', - }, - }, - { - id: '19', - data: { - label: '19', - cluster: 'c', - }, - }, - { - id: '20', - data: { - label: '20', - cluster: 'c', - }, - }, - { - id: '21', - data: { - label: '21', - cluster: 'c', - }, - }, - { - id: '22', - data: { - label: '22', - cluster: 'c', - }, - }, - { - id: '23', - data: { - label: '23', - cluster: 'c', - }, - }, - { - id: '24', - data: { - label: '24', - cluster: 'c', - }, - }, - { - id: '25', - data: { - label: '25', - cluster: 'c', - }, - }, - { - id: '26', - data: { - label: '26', - cluster: 'c', - }, - }, - { - id: '27', - data: { - label: '27', - cluster: 'c', - }, - }, - { - id: '28', - data: { - label: '28', - cluster: 'c', - }, - }, - { - id: '29', - data: { - label: '29', - cluster: 'c', - }, - }, - { - id: '30', - data: { - label: '30', - cluster: 'c', - }, - }, - { - id: '31', - data: { - label: '31', - cluster: 'd', - }, - }, - { - id: '32', - data: { - label: '32', - cluster: 'd', - }, - }, - { - id: '33', - data: { - label: '33', - cluster: 'd', - }, - }, - ], - edges: [ - { - id: 'edge-6295', - source: '0', - target: '1', - }, - { - id: 'edge-9870', - source: '0', - target: '2', - }, - { - id: 'edge-2656', - source: '0', - target: '3', - }, - { - id: 'edge-7789', - source: '0', - target: '4', - }, - { - id: 'edge-4078', - source: '0', - target: '5', - }, - { - id: 'edge-9413', - source: '0', - target: '7', - }, - { - id: 'edge-5236', - source: '0', - target: '8', - }, - { - id: 'edge-7823', - source: '0', - target: '9', - }, - { - id: 'edge-4697', - source: '0', - target: '10', - }, - { - id: 'edge-9387', - source: '0', - target: '11', - }, - { - id: 'edge-7914', - source: '0', - target: '13', - }, - { - id: 'edge-8474', - source: '0', - target: '14', - }, - { - id: 'edge-5896', - source: '0', - target: '15', - }, - { - id: 'edge-8393', - source: '0', - target: '16', - }, - { - id: 'edge-4763', - source: '2', - target: '3', - }, - { - id: 'edge-6744', - source: '4', - target: '5', - }, - { - id: 'edge-3854', - source: '4', - target: '6', - }, - { - id: 'edge-3895', - source: '5', - target: '6', - }, - { - id: 'edge-6403', - source: '7', - target: '13', - }, - { - id: 'edge-520', - source: '8', - target: '14', - }, - { - id: 'edge-5388', - source: '9', - target: '10', - }, - { - id: 'edge-9095', - source: '10', - target: '22', - }, - { - id: 'edge-3177', - source: '10', - target: '14', - }, - { - id: 'edge-839', - source: '10', - target: '12', - }, - { - id: 'edge-1712', - source: '10', - target: '24', - }, - { - id: 'edge-9622', - source: '10', - target: '21', - }, - { - id: 'edge-6745', - source: '10', - target: '20', - }, - { - id: 'edge-2467', - source: '11', - target: '24', - }, - { - id: 'edge-2550', - source: '11', - target: '22', - }, - { - id: 'edge-9144', - source: '11', - target: '14', - }, - { - id: 'edge-7801', - source: '12', - target: '13', - }, - { - id: 'edge-8572', - source: '16', - target: '17', - }, - { - id: 'edge-4541', - source: '16', - target: '18', - }, - { - id: 'edge-6974', - source: '16', - target: '21', - }, - { - id: 'edge-1867', - source: '16', - target: '22', - }, - { - id: 'edge-8900', - source: '17', - target: '18', - }, - { - id: 'edge-536', - source: '17', - target: '20', - }, - { - id: 'edge-9284', - source: '18', - target: '19', - }, - { - id: 'edge-6909', - source: '19', - target: '20', - }, - { - id: 'edge-882', - source: '19', - target: '33', - }, - { - id: 'edge-3134', - source: '19', - target: '22', - }, - { - id: 'edge-8297', - source: '19', - target: '23', - }, - { - id: 'edge-1539', - source: '20', - target: '21', - }, - { - id: 'edge-8813', - source: '21', - target: '22', - }, - { - id: 'edge-3600', - source: '22', - target: '24', - }, - { - id: 'edge-6282', - source: '22', - target: '25', - }, - { - id: 'edge-5281', - source: '22', - target: '26', - }, - { - id: 'edge-2821', - source: '22', - target: '23', - }, - { - id: 'edge-4346', - source: '22', - target: '28', - }, - { - id: 'edge-9766', - source: '22', - target: '30', - }, - { - id: 'edge-2254', - source: '22', - target: '31', - }, - { - id: 'edge-3830', - source: '22', - target: '32', - }, - { - id: 'edge-9313', - source: '22', - target: '33', - }, - { - id: 'edge-4793', - source: '23', - target: '28', - }, - { - id: 'edge-5806', - source: '23', - target: '27', - }, - { - id: 'edge-3992', - source: '23', - target: '29', - }, - { - id: 'edge-8927', - source: '23', - target: '30', - }, - { - id: 'edge-8878', - source: '23', - target: '31', - }, - { - id: 'edge-7242', - source: '23', - target: '33', - }, - { - id: 'edge-9725', - source: '32', - target: '33', - }, - ], -}; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; -const graph = new CustomGraph({ - container: 'container', - width, - height, - modes: { - default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], - }, - edge: { - keyShape: { - endArrow: true, - }, - }, - layout: { - type: 'gForce-gpu', - maxIteration: 1000, - linkDistance: (e) => { - if (e.source === '0') return 100; - return 1; - }, - }, - autoFit: 'view', - data, -}); - -window.graph = graph; diff --git a/packages/site/examples/layout/gpuLayout/demo/gForceComplexData.js b/packages/site/examples/layout/gpuLayout/demo/gForceComplexData.js deleted file mode 100644 index 9bc99a0712..0000000000 --- a/packages/site/examples/layout/gpuLayout/demo/gForceComplexData.js +++ /dev/null @@ -1,48 +0,0 @@ -// TODO: disable this demo temporary since gForce is not correct. - -import { Graph, extend } from '@antv/g6'; -import * as layoutGPU from '@antv/layout-gpu'; - -const layoutGPU = window.layoutGPU; -// GPU layout is not built-in G6 stbLib, you need to extend G6 with it. -const CustomGraph = extend(Graph, { - layouts: { - 'gForce-gpu': layoutGPU.GForceLayout, - }, -}); - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4b9bcbc25f.json') - .then((res) => res.json()) - .then((data) => { - const graph = new CustomGraph({ - container: 'container', - width, - height, - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - modes: { - default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], - }, - edge: { - keyShape: { - endArrow: true, - }, - }, - layout: { - type: 'gForce-gpu', - maxIteration: 1000, - }, - autoFit: 'view', - data, - }); - - window.graph = graph; - }); diff --git a/packages/site/examples/layout/gpuLayout/demo/meta.json b/packages/site/examples/layout/gpuLayout/demo/meta.json deleted file mode 100644 index 1893a5382b..0000000000 --- a/packages/site/examples/layout/gpuLayout/demo/meta.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "title": { - "zh": "中文分类", - "en": "Category" - }, - "demos": [ - { - "filename": "basicFruchterman.ts", - "title": { - "zh": "GPU Fruchterman 小数据", - "en": "GPU Fruchterman Small Data" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SmXBQ6fv8PoAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "fruchtermanComplexData.ts", - "title": { - "zh": "GPU Fruchterman 复杂数据", - "en": "GPU Fruchterman with Complex Data" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*MOhtRqDDV6oAAAAAAAAAAAAADmJ7AQ/original" - } - ] -} diff --git a/packages/site/examples/layout/gpuLayout/index.en.md b/packages/site/examples/layout/gpuLayout/index.en.md deleted file mode 100644 index 297da03d1b..0000000000 --- a/packages/site/examples/layout/gpuLayout/index.en.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: GPU Layout -order: 14 ---- - -G6 4.0 provides two kinds of GPU layout: - -- gforce: a new built-in layout that support CPU and GPU calculation, it implements the classical force-directed algorithm; -- fruchterman: anoher force-directed algorithm whose CPU version is supported in previous version, and G6 4.0 support GPU version fruchterman. - -Since the mechanism of the memory copy between GPU and CPU, the improvement is not obviouse in small graph, sometimes GPU version even performs worse than CPU. But in middle and large graph, the calculation speed of GPU might be hundreds times of CPU. The two table below shows the comparison on different scale datasets: - - diff --git a/packages/site/examples/layout/gpuLayout/index.zh.md b/packages/site/examples/layout/gpuLayout/index.zh.md deleted file mode 100644 index 78d2b66efb..0000000000 --- a/packages/site/examples/layout/gpuLayout/index.zh.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: GPU 图布局 -order: 14 ---- - -G6 4.0 推出两种支持 GPU 布局： - -- gforce：全新内置布局，实现了经典的力导向算法； -- fruchterman：另一种力导向的变种算法，CPU 版本在之前的版本就已经存在，G6 4.0 支持使用 GPU 并行计算该算法。 - -由于 GPU 与 CPU 通信的拷贝效率原因，在小规模图上 GPU 版本的布局提升不大，甚至可能更慢。但在较大、大规模图上，计算性能大大提升，升至超过 CPU 的百倍。下面两张表格对比了两个算法在不同数据规模、不同算法下 GPU 与 CPU 的计算时间： - - diff --git a/packages/site/examples/layout/grid/demo/basic.js b/packages/site/examples/layout/grid/demo/basic.js new file mode 100644 index 0000000000..6fc8d36289 --- /dev/null +++ b/packages/site/examples/layout/grid/demo/basic.js @@ -0,0 +1,40 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/cluster.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + layout: { + type: 'grid', + sortBy: 'id', + }, + node: { + style: { + size: 20, + stroke: '#ccc', + lineWidth: 1, + labelText: (d) => d.id, + }, + palette: { + type: 'group', + field: 'cluster', + }, + }, + behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'], + animation: true, + }); + + graph.render(); + + window.addPanel((gui) => { + gui.add({ sortBy: 'id' }, 'sortBy', ['id', 'cluster']).onChange((type) => { + graph.setLayout({ + type: 'grid', + sortBy: type, + }); + graph.layout(); + }); + }); + }); diff --git a/packages/site/examples/layout/gridLayout/demo/meta.json b/packages/site/examples/layout/grid/demo/meta.json similarity index 91% rename from packages/site/examples/layout/gridLayout/demo/meta.json rename to packages/site/examples/layout/grid/demo/meta.json index 7d5a8c38ad..d510ed2a5d 100644 --- a/packages/site/examples/layout/gridLayout/demo/meta.json +++ b/packages/site/examples/layout/grid/demo/meta.json @@ -5,7 +5,7 @@ }, "demos": [ { - "filename": "grid.ts", + "filename": "basic.js", "title": { "zh": "Grid 网格布局", "en": "Grid Layout" diff --git a/packages/site/examples/layout/grid/index.en.md b/packages/site/examples/layout/grid/index.en.md new file mode 100644 index 0000000000..e13c08339f --- /dev/null +++ b/packages/site/examples/layout/grid/index.en.md @@ -0,0 +1,4 @@ +--- +title: Grid +order: 11 +--- diff --git a/packages/site/examples/layout/grid/index.zh.md b/packages/site/examples/layout/grid/index.zh.md new file mode 100644 index 0000000000..32b7501dc0 --- /dev/null +++ b/packages/site/examples/layout/grid/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Grid 网格布局 +order: 11 +--- diff --git a/packages/site/examples/layout/gridLayout/API.en.md b/packages/site/examples/layout/gridLayout/API.en.md deleted file mode 100644 index 2ca44ea11a..0000000000 --- a/packages/site/examples/layout/gridLayout/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/gridLayout/API.zh.md b/packages/site/examples/layout/gridLayout/API.zh.md deleted file mode 100644 index 7f040391c3..0000000000 --- a/packages/site/examples/layout/gridLayout/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/gridLayout/demo/grid.ts b/packages/site/examples/layout/gridLayout/demo/grid.ts deleted file mode 100644 index bc050cef3d..0000000000 --- a/packages/site/examples/layout/gridLayout/demo/grid.ts +++ /dev/null @@ -1,659 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - data: { - label: '0', - cluster: '0', - }, - }, - { - id: '1', - data: { - label: '1', - cluster: '0', - }, - }, - { - id: '2', - data: { - label: '2', - cluster: '0', - }, - }, - { - id: '3', - data: { - label: '3', - cluster: '0', - }, - }, - { - id: '4', - data: { - label: '4', - cluster: '0', - }, - }, - { - id: '5', - data: { - label: '5', - cluster: '3', - }, - }, - { - id: '6', - data: { - label: '6', - cluster: '0', - }, - }, - { - id: '7', - data: { - label: '7', - cluster: '0', - }, - }, - { - id: '8', - data: { - label: '8', - cluster: '0', - }, - }, - { - id: '9', - data: { - label: '9', - cluster: '3', - }, - }, - { - id: '10', - data: { - label: '10', - cluster: '3', - }, - }, - { - id: '11', - data: { - label: '11', - cluster: '2', - }, - }, - { - id: '12', - data: { - label: '12', - cluster: '2', - }, - }, - { - id: '13', - data: { - label: '13', - cluster: '4', - }, - }, - { - id: '14', - data: { - label: '14', - cluster: '2', - }, - }, - { - id: '15', - data: { - label: '15', - cluster: '2', - }, - }, - { - id: '16', - data: { - label: '16', - cluster: '2', - }, - }, - { - id: '17', - data: { - label: '17', - cluster: '1', - }, - }, - { - id: '18', - data: { - label: '18', - cluster: '4', - }, - }, - { - id: '19', - data: { - label: '19', - cluster: '4', - }, - }, - { - id: '20', - data: { - label: '20', - cluster: '4', - }, - }, - { - id: '21', - data: { - label: '21', - cluster: '0', - }, - }, - { - id: '22', - data: { - label: '22', - cluster: '2', - }, - }, - { - id: '23', - data: { - label: '23', - cluster: '2', - }, - }, - { - id: '24', - data: { - label: '24', - cluster: '2', - }, - }, - { - id: '25', - data: { - label: '25', - cluster: '3', - }, - }, - { - id: '26', - data: { - label: '26', - cluster: '4', - }, - }, - { - id: '27', - data: { - label: '27', - cluster: '4', - }, - }, - { - id: '28', - data: { - label: '28', - cluster: '1', - }, - }, - { - id: '29', - data: { - label: '29', - cluster: '1', - }, - }, - { - id: '30', - data: { - label: '30', - cluster: '4', - }, - }, - { - id: '31', - data: { - label: '31', - cluster: '4', - }, - }, - { - id: '32', - data: { - label: '32', - cluster: '1', - }, - }, - { - id: '33', - data: { - label: '33', - cluster: '2', - }, - }, - ], - edges: [ - { - id: 'edge-0', - source: '0', - target: '1', - data: {}, - }, - { - id: 'edge-1', - source: '0', - target: '2', - data: {}, - }, - { - id: 'edge-2', - source: '0', - target: '3', - data: {}, - }, - { - id: 'edge-3', - source: '0', - target: '4', - data: {}, - }, - { - id: 'edge-4', - source: '0', - target: '5', - data: {}, - }, - { - id: 'edge-5', - source: '0', - target: '7', - data: {}, - }, - { - id: 'edge-6', - source: '0', - target: '8', - data: {}, - }, - { - id: 'edge-7', - source: '0', - target: '9', - data: {}, - }, - { - id: 'edge-8', - source: '0', - target: '10', - data: {}, - }, - { - id: 'edge-9', - source: '0', - target: '11', - data: {}, - }, - { - id: 'edge-10', - source: '0', - target: '13', - data: {}, - }, - { - id: 'edge-11', - source: '0', - target: '14', - data: {}, - }, - { - id: 'edge-12', - source: '0', - target: '15', - data: {}, - }, - { - id: 'edge-13', - source: '0', - target: '16', - data: {}, - }, - { - id: 'edge-14', - source: '2', - target: '3', - data: {}, - }, - { - id: 'edge-15', - source: '4', - target: '5', - data: {}, - }, - { - id: 'edge-16', - source: '4', - target: '6', - data: {}, - }, - { - id: 'edge-17', - source: '5', - target: '6', - data: {}, - }, - { - id: 'edge-18', - source: '7', - target: '13', - data: {}, - }, - { - id: 'edge-19', - source: '8', - target: '14', - data: {}, - }, - { - id: 'edge-20', - source: '9', - target: '10', - data: {}, - }, - { - id: 'edge-21', - source: '10', - target: '22', - data: {}, - }, - { - id: 'edge-22', - source: '10', - target: '14', - data: {}, - }, - { - id: 'edge-23', - source: '10', - target: '12', - data: {}, - }, - { - id: 'edge-24', - source: '10', - target: '24', - data: {}, - }, - { - id: 'edge-25', - source: '10', - target: '21', - data: {}, - }, - { - id: 'edge-26', - source: '10', - target: '20', - data: {}, - }, - { - id: 'edge-27', - source: '11', - target: '24', - data: {}, - }, - { - id: 'edge-28', - source: '11', - target: '22', - data: {}, - }, - { - id: 'edge-29', - source: '11', - target: '14', - data: {}, - }, - { - id: 'edge-30', - source: '12', - target: '13', - data: {}, - }, - { - id: 'edge-31', - source: '16', - target: '17', - data: {}, - }, - { - id: 'edge-32', - source: '16', - target: '18', - data: {}, - }, - { - id: 'edge-33', - source: '16', - target: '21', - data: {}, - }, - { - id: 'edge-34', - source: '16', - target: '22', - data: {}, - }, - { - id: 'edge-35', - source: '17', - target: '18', - data: {}, - }, - { - id: 'edge-36', - source: '17', - target: '20', - data: {}, - }, - { - id: 'edge-37', - source: '18', - target: '19', - data: {}, - }, - { - id: 'edge-38', - source: '19', - target: '20', - data: {}, - }, - { - id: 'edge-39', - source: '19', - target: '33', - data: {}, - }, - { - id: 'edge-40', - source: '19', - target: '22', - data: {}, - }, - { - id: 'edge-41', - source: '19', - target: '23', - data: {}, - }, - { - id: 'edge-42', - source: '20', - target: '21', - data: {}, - }, - { - id: 'edge-43', - source: '21', - target: '22', - data: {}, - }, - { - id: 'edge-44', - source: '22', - target: '24', - data: {}, - }, - { - id: 'edge-45', - source: '22', - target: '25', - data: {}, - }, - { - id: 'edge-46', - source: '22', - target: '26', - data: {}, - }, - { - id: 'edge-47', - source: '22', - target: '23', - data: {}, - }, - { - id: 'edge-48', - source: '22', - target: '28', - data: {}, - }, - { - id: 'edge-49', - source: '22', - target: '30', - data: {}, - }, - { - id: 'edge-50', - source: '22', - target: '31', - data: {}, - }, - { - id: 'edge-51', - source: '22', - target: '32', - data: {}, - }, - { - id: 'edge-52', - source: '22', - target: '33', - data: {}, - }, - { - id: 'edge-53', - source: '23', - target: '28', - data: {}, - }, - { - id: 'edge-54', - source: '23', - target: '27', - data: {}, - }, - { - id: 'edge-55', - source: '23', - target: '29', - data: {}, - }, - { - id: 'edge-56', - source: '23', - target: '30', - data: {}, - }, - { - id: 'edge-57', - source: '23', - target: '31', - data: {}, - }, - { - id: 'edge-58', - source: '23', - target: '33', - data: {}, - }, - { - id: 'edge-59', - source: '32', - target: '33', - data: {}, - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'grid', - sortBy: 'id', - }, - node: { - style: { - size: 20, - stroke: '#ccc', - lineWidth: 1, - labelText: (d) => d.id, - }, - palette: { - type: 'group', - field: 'cluster', - color: 'antv', - }, - }, - behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'], - animation: true, -}); - -graph.render(); - -/** Below is the buttons. */ -const SORT_BY = { - ID: 'id', - Degree: 'degree', - Cluster: (n1, n2) => Number(n2.data.cluster) - Number(n1.data.cluster), -}; - -const container = document.getElementById('container'); -const btnContainer = document.createElement('div'); -btnContainer.style.position = 'absolute'; -container.appendChild(btnContainer); -const tip = document.createElement('span'); -tip.innerHTML = '👉 Grid layout soryBy: '; -btnContainer.appendChild(tip); - -Object.keys(SORT_BY).forEach((name, i) => { - const btn = document.createElement('a'); - btn.innerHTML = name; - btn.style.padding = '4px'; - btn.style.marginLeft = i > 0 ? '24px' : '8px'; - btnContainer.appendChild(btn); - btn.addEventListener('click', () => { - graph.setLayout({ type: 'grid', sortBy: name.toLowerCase() }); - graph.layout(); - }); -}); diff --git a/packages/site/examples/layout/gridLayout/index.en.md b/packages/site/examples/layout/gridLayout/index.en.md deleted file mode 100644 index 8ba0f9e619..0000000000 --- a/packages/site/examples/layout/gridLayout/index.en.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Grid -order: 11 ---- - -Grid Layout will order the nodes according to the parameters, and then place the nodes on the grids. - -## Usage - -As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/sub-layout). By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the ordering method, rows, cols, prevent node overlappings, and so on. - -- Example 1 : Basic Grid Layout, the nodes are ordered according to the data. -- Example 2 : Order the nodes according to the property `cluster`. diff --git a/packages/site/examples/layout/gridLayout/index.zh.md b/packages/site/examples/layout/gridLayout/index.zh.md deleted file mode 100644 index 23a6c61af8..0000000000 --- a/packages/site/examples/layout/gridLayout/index.zh.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Grid 网格布局 -order: 11 ---- - -Grid 网格布局根据参数指定的排序方式对节点进行排序后，将节点排列在网格上。 - -## 使用指南 - -G6 内置的 Grid 网格布局可在实例化 Graph 时使用该布局。除此之外，还可以如[子图布局](/zh/docs/manual/middle/layout/sub-layout)所示单独使用布局。该布局可以通过配置调整节点排序方式、行数、列数、节点不重叠等。 - -- 代码演示 1 ：基本的网格布局，节点根据在数据中的顺序排列。 -- 代码演示 2 ：节点根据数据中的 cluster 属性排序。 diff --git a/packages/site/examples/layout/indented/API.en.md b/packages/site/examples/layout/indented/API.en.md deleted file mode 100644 index 94a70e8908..0000000000 --- a/packages/site/examples/layout/indented/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/indented/API.zh.md b/packages/site/examples/layout/indented/API.zh.md deleted file mode 100644 index 380e25baa2..0000000000 --- a/packages/site/examples/layout/indented/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/indented/demo/basic.js b/packages/site/examples/layout/indented/demo/basic.js new file mode 100644 index 0000000000..b20ae5986f --- /dev/null +++ b/packages/site/examples/layout/indented/demo/basic.js @@ -0,0 +1,56 @@ +import { Graph, treeToGraphData } from '@antv/g6'; + +fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') + .then((res) => res.json()) + .then((data) => { + function createFindParent(tree) { + const map = {}; + function buildMap(node, parent) { + if (parent) map[node.id] = parent; + node.children?.forEach((child) => buildMap(child, node)); + } + buildMap(tree, null); + return (nodeId) => map[nodeId] || null; + } + const findParent = createFindParent(data); + + const graph = new Graph({ + container: 'container', + data: treeToGraphData(data), + autoFit: 'view', + node: { + style: { + labelText: (d) => d.id, + labelPlacement: (d) => { + const id = d.id; + if (id === data.id) return 'top'; + const lefts = ['Regression', 'Classification']; + if (lefts.includes(id) || lefts.includes(findParent(id).id)) return 'left'; + return 'right'; + }, + ports: [{ position: 'center' }], + }, + }, + edge: { + type: 'cubic-horizontal', + }, + layout: { + type: 'indented', + direction: 'H', + indent: 80, + getHeight: () => { + return 10; + }, + getWidth: () => { + return 10; + }, + getSide: (d) => { + if (d.id === 'Regression' || d.id === 'Classification') return 'left'; + return 'right'; + }, + }, + behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/indented/demo/filesystem.js b/packages/site/examples/layout/indented/demo/filesystem.js deleted file mode 100644 index da5ec1dcfe..0000000000 --- a/packages/site/examples/layout/indented/demo/filesystem.js +++ /dev/null @@ -1,211 +0,0 @@ -import { Extensions, Graph, extend, stdLib } from '@antv/g6'; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -const data = { - id: '1', - name: 'src', - children: [ - { - id: '1-1', - name: 'behavior', - children: [], - }, - { - id: '1-3', - name: 'graph', - children: [ - { - id: '1-3-1', - name: 'controller', - children: [], - }, - ], - }, - { - id: '1-5', - name: 'item', - children: [], - }, - { - id: '1-6', - name: 'shape', - children: [ - { - id: '1-6-2', - name: 'extend', - children: [], - }, - ], - }, - { - id: '1-7', - name: 'util', - children: [], - }, - ], -}; - -class FileNode extends Extensions.CircleNode { - defaultStyles = { - keyShape: {}, - }; - drawKeyShape(model, shapeMap, diffData, diffState) { - const { keyShape: keyShapeStyle } = model.data; - return this.upsertShape( - 'rect', - 'keyShape', - { - ...this.defaultStyles.keyShape, - ...keyShapeStyle, - width: 50, - height: 10, - x: 10, - y: -12, - opacity: 0, - }, - { - model, - shapeMap, - diffData, - diffState, - }, - ); - } - drawLabelShape(model, shapeMap, diffData, diffState) { - const { labelShape: propsLabelStyle } = model.data; - return this.upsertShape( - 'text', - 'labelShape', - { - ...this.defaultStyles.labelShape, - ...propsLabelStyle, - x: 20, - y: -8, - fill: '#666', - fontSize: 12, - textAlign: 'left', - textBaseline: 'bottom', - }, - { - model, - shapeMap, - diffData, - diffState, - }, - ); - } - drawOtherShapes(model, shapeMap, diffData, diffState) { - const { childrenIds, collapsed } = model.data; - const otherShapes = {}; - if (childrenIds?.length) { - otherShapes.collapseMarkerShape = this.upsertShape( - 'path', - 'collapseMarkerShape', - { - cursor: 'pointer', - fill: '#666', - path: collapsed ? stdLib.markers.upTriangle(20, -8, 4) : stdLib.markers.downTriangle(14, -16, 4), - }, - { - model, - shapeMap, - diffData, - diffState, - }, - ); - } - return otherShapes; - } - balanceShapeSize() {} -} - -class StepEdge extends Extensions.PolylineEdge { - defaultStyles = { - keyShape: {}, - }; - - getControlPoints(model, startPoint, endPoint) { - return [ - startPoint, - { - x: startPoint.x, - y: endPoint.y, - }, - endPoint, - ]; - } - balanceShapeSize() {} -} - -const ExtGraph = extend(Graph, { - nodes: { - 'file-node': FileNode, - }, - edges: { - 'step-edge': StepEdge, - }, -}); -const graph = new ExtGraph({ - container: 'container', - width, - height, - modes: { - default: ['collapse-expand-tree', 'drag-canvas', 'zoom-canvas'], - }, - plugins: [ - { - type: 'lod-controller', - disableLod: true, - }, - ], - layout: { - type: 'indented', - isHorizontal: true, - direction: 'LR', - indent: 30, - getHeight: function getHeight() { - return 16; - }, - getWidth: function getWidth() { - return 16; - }, - }, - node: (model) => ({ - id: model.id, - data: { - type: 'file-node', - ...model.data, - otherShapes: {}, - labelShape: { - text: model.data.name, - }, - anchorPoints: [ - [0, 0.5], - [0.5, 0.5], - ], - animates: { - update: [ - { - fields: ['x', 'y'], - duration: 500, - shapeId: 'group', - order: 0, - }, - ], - }, - }, - }), - edge: { - type: 'step-edge', - }, - data: { - type: 'treeData', - value: data, - }, - autoFit: 'center', -}); - -window.graph = graph; \ No newline at end of file diff --git a/packages/site/examples/layout/indented/demo/graphWithIntended.js b/packages/site/examples/layout/indented/demo/graphWithIntended.js deleted file mode 100644 index bbc26b253d..0000000000 --- a/packages/site/examples/layout/indented/demo/graphWithIntended.js +++ /dev/null @@ -1,112 +0,0 @@ -import { Graph, Extensions, extend } from '@antv/g6'; - -const ExtGraph = extend(Graph, { - edges: { - 'cubic-vertical-edge': Extensions.CubicVerticalEdge, - }, -}); - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json') - .then((res) => res.json()) - .then((data) => { - const graph = new ExtGraph({ - container, - width, - height, - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - modes: { - default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'], - }, - node: (model) => { - return { - id: model.id, - data: { - ...model.data, - lodLevels: [], - anchorPoints: - model.data.layoutDirection === 'TB' - ? [ - [0.5, 0], - [0.5, 1], - ] - : [ - [0, 0.5], - [1, 0.5], - ], - animates: { - update: [ - { - fields: ['x', 'y'], - duration: 500, - shapeId: 'group', - order: 0, - }, - ], - hide: [ - { - fields: ['opacity'], - duration: 200, - shapeId: 'keyShape', - }, - { - fields: ['opacity'], - duration: 200, - shapeId: 'labelShape', - }, - ], - show: [ - { - fields: ['opacity'], - duration: 1000, - shapeId: 'keyShape', - }, - { - fields: ['opacity'], - duration: 1000, - shapeId: 'labelShape', - }, - ], - }, - }, - }; - }, - edge: { - type: 'cubic-vertical-edge', - keyShape: { - opacity: 0.5, - endArrow: true, - }, - }, - layout: { - type: 'indented', - direction: 'H', - indent: 80, - getHeight: () => { - return 10; - }, - getWidth: () => { - return 10; - }, - getSide: (d) => { - if (d.id === 'Regression' || d.id === 'Classification') return 'left'; - return 'right'; - }, - }, - autoFit: 'view', - data: { - type: 'graphData', - value: data, - }, - }); - -window.graph = graph; - }); diff --git a/packages/site/examples/layout/indented/demo/hIntended.js b/packages/site/examples/layout/indented/demo/hIntended.js deleted file mode 100644 index 41bfaa4dc7..0000000000 --- a/packages/site/examples/layout/indented/demo/hIntended.js +++ /dev/null @@ -1,124 +0,0 @@ -import { Graph, Extensions, extend } from '@antv/g6'; - -const ExtGraph = extend(Graph, { - edges: { - 'cubic-horizontal-edge': Extensions.CubicHorizontalEdge, - }, -}); - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') - .then((res) => res.json()) - .then((data) => { - const graph = new ExtGraph({ - container, - width, - height, - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - modes: { - default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'], - }, - node: (model) => { - const configRelatedToLayout = - model.data.layoutDirection === 'TB' - ? { - labelShape: { - text: model.id, - position: 'bottom', - offsetX: 0, - }, - anchorPoints: [ - [0.5, 0], - [0.5, 1], - ], - } - : { - labelShape: { - text: model.id, - position: model.data.childrenIds?.length ? 'left' : 'right', - offsetX: model.data.childrenIds?.length ? -10 : 10, - maxWidth: '300%', - }, - anchorPoints: [ - [0, 0.5], - [1, 0.5], - ], - }; - return { - id: model.id, - data: { - ...model.data, - labelBackgroundShape: {}, - ...configRelatedToLayout, - animates: { - update: [ - { - fields: ['x', 'y'], - duration: 500, - shapeId: 'group', - order: 0, - }, - ], - hide: [ - { - fields: ['opacity'], - duration: 200, - shapeId: 'keyShape', - }, - { - fields: ['opacity'], - duration: 200, - shapeId: 'labelShape', - }, - ], - show: [ - { - fields: ['opacity'], - duration: 1000, - shapeId: 'keyShape', - }, - { - fields: ['opacity'], - duration: 1000, - shapeId: 'labelShape', - }, - ], - }, - }, - }; - }, - edge: { - type: 'cubic-horizontal-edge', - }, - layout: { - type: 'indented', - direction: 'H', - indent: 80, - getHeight: () => { - return 10; - }, - getWidth: () => { - return 10; - }, - getSide: (d) => { - if (d.id === 'Regression' || d.id === 'Classification') return 'left'; - return 'right'; - }, - }, - autoFit: 'view', - data: { - type: 'treeData', - value: data, - }, - }); - -window.graph = graph; - }); diff --git a/packages/site/examples/layout/indented/demo/intendAlignTop.js b/packages/site/examples/layout/indented/demo/intendAlignTop.js deleted file mode 100644 index 496b562c95..0000000000 --- a/packages/site/examples/layout/indented/demo/intendAlignTop.js +++ /dev/null @@ -1,226 +0,0 @@ -import { Graph, Extensions, extend, stdLib } from '@antv/g6'; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -class CustomNode extends Extensions.CircleNode { - defaultStyles = { - keyShape: {}, - }; - drawKeyShape(model, shapeMap, diffData, diffState) { - const { keyShape: keyShapeStyle } = model.data; - return this.upsertShape( - 'rect', - 'keyShape', - { - ...this.defaultStyles.keyShape, - ...keyShapeStyle, - x: -100, - y: -30, - width: 200, - height: 60, - stroke: '#4089FF', - lineWidth: 1, - radius: 4, - fill: '#fff', - opacity: 1, - }, - { - model, - shapeMap, - diffData, - diffState, - }, - ); - } - drawLabelShape(model, shapeMap, diffData, diffState) { - const { labelShape: propsLabelStyle } = model.data; - return this.upsertShape( - 'text', - 'labelShape', - { - ...this.defaultStyles.labelShape, - ...propsLabelStyle, - textBaseline: 'top', - x: -100 + 8, - y: -30 + 2, - lineHeight: 20, - text: model.id, - fill: '#fff', - zIndex: 10, - wordWrap: true, - maxLines: 1, - textOverflow: 'ellipsis', - wordWrapWidth: 180, - }, - { - model, - shapeMap, - diffData, - diffState, - }, - ); - } - drawOtherShapes(model, shapeMap, diffData, diffState) { - const { childrenIds, collapsed } = model.data; - const bbox = shapeMap.keyShape.getRenderBounds(); - const otherShapes = { - titleBoxShape: this.upsertShape( - 'rect', - 'titleBoxShape', - { - x: -100, - y: -30, - width: 200, - height: 30, - fill: '#4089FF', - radius: [4, 4, 0, 0], - }, - { - model, - shapeMap, - diffData, - diffState, - }, - ), - descriptionShape: this.upsertShape( - 'text', - 'descriptionShape', - { - textBaseline: 'top', - x: -100 + 8, - y: 2, - lineHeight: 20, - text: 'description', - fill: 'rgba(0,0,0, 1)', - zIndex: 10, - }, - { - model, - shapeMap, - diffData, - diffState, - }, - ), - }; - if (childrenIds?.length) { - otherShapes.collapseMarkerShape = this.upsertShape( - 'path', - 'collapseMarkerShape', - { - cursor: 'pointer', - stroke: '#666', - lineWidth: 1, - fill: '#fff', - path: collapsed - ? stdLib.markers.expand(bbox.max[0], bbox.center[1], 6) - : stdLib.markers.collapse(bbox.max[0], bbox.center[1], 6), - }, - { - model, - shapeMap, - diffData, - diffState, - }, - ); - } - return otherShapes; - } - balanceShapeSize() {} -} - -const ExtGraph = extend(Graph, { - nodes: { - 'tree-card-node': CustomNode, - }, - edges: { - 'cubic-horizontal-edge': Extensions.CubicHorizontalEdge, - }, -}); - -fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') - .then((res) => res.json()) - .then((data) => { - const graph = new ExtGraph({ - container, - width, - height, - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - modes: { - default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'], - }, - node: (model) => { - return { - id: model.id, - data: { - ...model.data, - anchorPoints: [ - [0, 0.5], - [1, 0.5], - ], - type: 'tree-card-node', - otherShapes: {}, - animates: { - update: [ - { - fields: ['x', 'y'], - duration: 500, - shapeId: 'group', - order: 0, - }, - ], - hide: [ - { - fields: ['opacity'], - duration: 200, - shapeId: 'keyShape', - }, - { - fields: ['opacity'], - duration: 200, - shapeId: 'labelShape', - }, - ], - show: [ - { - fields: ['opacity'], - duration: 1000, - shapeId: 'keyShape', - }, - { - fields: ['opacity'], - duration: 1000, - shapeId: 'labelShape', - }, - ], - }, - }, - }; - }, - edge: { - type: 'cubic-horizontal-edge', - }, - layout: { - type: 'indented', - direction: 'LR', - dropCap: false, - indent: 500, - getHeight: () => { - return 60; - }, - }, - autoFit: 'view', - data: { - type: 'treeData', - value: data, - }, - }); - - window.graph = graph; - }); diff --git a/packages/site/examples/layout/indented/demo/meta.json b/packages/site/examples/layout/indented/demo/meta.json index 9ea29673ed..ebea71e758 100644 --- a/packages/site/examples/layout/indented/demo/meta.json +++ b/packages/site/examples/layout/indented/demo/meta.json @@ -5,36 +5,12 @@ }, "demos": [ { - "filename": "filesystem.js", - "title": { - "zh": "缩进树-文件系统", - "en": "FileSystem-Indented Layout" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*PJnfTKFRaCAAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "intendAlignTop.js", - "title": { - "zh": "缩进树-顶部对齐", - "en": "FileSystem-Align Top" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kbzRRZk2t2cAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "hIntended.js", + "filename": "basic.js", "title": { "zh": "缩进树-子节点两侧分布", "en": "Two Side Indented Layout" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*42EXSYyBcTYAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "graphWithIntended.js", - "title": { - "zh": "图数据使用缩进树", - "en": "Indented Layout with Graph Data" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*AvvxR51CtbMAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/packages/site/examples/layout/indented/index.en.md b/packages/site/examples/layout/indented/index.en.md index 8cd1b6614a..6b63339726 100644 --- a/packages/site/examples/layout/indented/index.en.md +++ b/packages/site/examples/layout/indented/index.en.md @@ -2,11 +2,3 @@ title: Indented order: 6 --- - -In indented tree layout, each node takes a row or a column.
indented - -## Usage - -Indented is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in `layout` while instantiating Graph. - -You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information. diff --git a/packages/site/examples/layout/indented/index.zh.md b/packages/site/examples/layout/indented/index.zh.md index 99a347fd89..29107d7c2a 100644 --- a/packages/site/examples/layout/indented/index.zh.md +++ b/packages/site/examples/layout/indented/index.zh.md @@ -2,11 +2,3 @@ title: Indented 缩进树 order: 6 --- - -缩进树布局。每个元素会占一行/一列。
indented - -## 使用指南 - -缩进树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。 - -该布局有以下配置项，Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。 diff --git a/packages/site/examples/layout/layoutMechanism/API.en.md b/packages/site/examples/layout/layoutMechanism/API.en.md deleted file mode 100644 index ff913a6bd1..0000000000 --- a/packages/site/examples/layout/layoutMechanism/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/layoutMechanism/API.zh.md b/packages/site/examples/layout/layoutMechanism/API.zh.md deleted file mode 100644 index a3512c1184..0000000000 --- a/packages/site/examples/layout/layoutMechanism/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/layoutMechanism/demo/customBigraph.js b/packages/site/examples/layout/layoutMechanism/demo/customBigraph.js deleted file mode 100644 index dc337725ab..0000000000 --- a/packages/site/examples/layout/layoutMechanism/demo/customBigraph.js +++ /dev/null @@ -1,316 +0,0 @@ -import G6, { extend } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - data: { - label: 'A', - cluster: 'part1', - }, - }, - { - id: '1', - data: { - label: 'B', - cluster: 'part1', - }, - }, - { - id: '2', - data: { - label: 'C', - cluster: 'part1', - }, - }, - { - id: '3', - data: { - label: 'D', - cluster: 'part1', - }, - }, - { - id: '4', - data: { - label: 'E', - cluster: 'part1', - }, - }, - { - id: '5', - data: { - label: 'F', - cluster: 'part1', - }, - }, - { - id: '6', - data: { - label: 'a', - cluster: 'part2', - }, - }, - { - id: '7', - data: { - label: 'b', - cluster: 'part2', - }, - }, - { - id: '8', - data: { - label: 'c', - cluster: 'part2', - }, - }, - { - id: '9', - data: { - label: 'd', - cluster: 'part2', - }, - }, - ], - edges: [ - { - id: 'edge-270', - source: '0', - target: '6', - }, - { - id: 'edge-483', - source: '0', - target: '7', - }, - { - id: 'edge-942', - source: '0', - target: '9', - }, - { - id: 'edge-569', - source: '1', - target: '6', - }, - { - id: 'edge-152', - source: '1', - target: '9', - }, - { - id: 'edge-540', - source: '1', - target: '7', - }, - { - id: 'edge-754', - source: '2', - target: '8', - }, - { - id: 'edge-78', - source: '2', - target: '9', - }, - { - id: 'edge-824', - source: '2', - target: '6', - }, - { - id: 'edge-308', - source: '3', - target: '8', - }, - { - id: 'edge-254', - source: '4', - target: '6', - }, - { - id: 'edge-283', - source: '4', - target: '7', - }, - { - id: 'edge-360', - source: '5', - target: '9', - }, - ], -}; - -class BiLayout { - // implements Layout<{}> - id = 'bi-layout'; - - constructor(options = {}) { - this.options = options; - } - /** - * Return the positions of nodes and edges(if needed). - */ - async execute(graph, options = {}) { - return this.genericLineLayout(false, graph, options); - } - /** - * To directly assign the positions to the nodes. - */ - async assign(graph, options = {}) { - this.genericLineLayout(true, graph, options); - } - - async genericLineLayout(assign, graph, options = {}) { - const { - center = [0, 0], - biSep = 100, - nodeSep = 20, - nodeSize = 32, - direction = 'horizontal', - } = { ...this.options, ...options }; - let part1Pos = 0; - let part2Pos = 0; - if (direction === 'horizontal') { - part1Pos = center[0] - biSep / 2; - part2Pos = center[0] + biSep / 2; - } - const nodes = graph.getAllNodes(); - const edges = graph.getAllEdges(); - - const part1Nodes = []; - const part2Nodes = []; - const part1NodeMap = new Map(); - const part2NodeMap = new Map(); - // separate the nodes and init the positions - nodes.forEach(function (node, i) { - if (node.data.cluster === 'part1') { - part1Nodes.push(node); - part1NodeMap.set(node.id, i); - } else { - part2Nodes.push(node); - part2NodeMap.set(node.id, i); - } - }); - - // order the part1 node - const indexMap = {}; - part1Nodes.forEach(function (p1n) { - let index = 0; - let adjCount = 0; - edges.forEach(function (edge) { - const sourceId = edge.source; - const targetId = edge.target; - if (sourceId === p1n.id) { - index += part2NodeMap.get(targetId); - adjCount += 1; - } else if (targetId === p1n.id) { - index += part2NodeMap.get(sourceId); - adjCount += 1; - } - }); - index /= adjCount; - indexMap[p1n.id] = index; - }); - part1Nodes.sort(function (a, b) { - return indexMap[a.id] - indexMap[b.id]; - }); - part2Nodes.forEach(function (p2n) { - let index = 0; - let adjCount = 0; - edges.forEach(function (edge) { - const sourceId = edge.source; - const targetId = edge.target; - if (sourceId === p2n.id) { - index += part1NodeMap.get(targetId); - adjCount += 1; - } else if (targetId === p2n.id) { - index += part1NodeMap.get(sourceId); - adjCount += 1; - } - }); - index /= adjCount; - indexMap[p2n.id] = index; - }); - part2Nodes.sort(function (a, b) { - return indexMap[a.id] - indexMap[b.id]; - }); - - // place the nodes - const hLength = part1Nodes.length > part2Nodes.length ? part1Nodes.length : part2Nodes.length; - const height = hLength * (nodeSep + nodeSize); - let begin = center[1] - height / 2; - if (direction === 'vertical') { - begin = center[0] - height / 2; - } - part1Nodes.forEach(function (p1n, i) { - if (direction === 'horizontal') { - p1n.data.x = part1Pos; - p1n.data.y = begin + i * (nodeSep + nodeSize); - } else { - p1n.data.x = begin + i * (nodeSep + nodeSize); - p1n.data.y = part1Pos; - } - }); - part2Nodes.forEach(function (p2n, i) { - if (direction === 'horizontal') { - p2n.data.x = part2Pos; - p2n.data.y = begin + i * (nodeSep + nodeSize); - } else { - p2n.data.x = begin + i * (nodeSep + nodeSize); - p2n.data.y = part2Pos; - } - }); - - const result = { - nodes: part1Nodes.concat(part2Nodes).map((node) => ({ id: node.id, data: { x: node.data.x, y: node.data.y } })), - edges, - }; - - if (assign) { - layoutNodes.forEach((node) => { - graph.mergeNodeData(node.id, { - x: node.data.x, - y: node.data.y, - }); - }); - } - return result; - } -} - -const CustomGraph = extend(Graph, { - layouts: { - 'bi-layout': BiLayout, - }, -}); - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; -const graph = new CustomGraph({ - container: 'container', - width, - height, - layout: { - type: 'bi-layout', - biSep: 300, - nodeSep: 20, - nodeSize: 32, - }, - theme: { - type: 'spec', - specification: { - node: { - dataTypeField: 'cluster', - }, - }, - }, - modes: { - default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'], - }, - data, -}); - -window.graph = graph; diff --git a/packages/site/examples/layout/layoutMechanism/demo/dataChange.js b/packages/site/examples/layout/layoutMechanism/demo/dataChange.js deleted file mode 100644 index 09f054abf9..0000000000 --- a/packages/site/examples/layout/layoutMechanism/demo/dataChange.js +++ /dev/null @@ -1,621 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - data: { - label: '0', - }, - }, - { - id: '1', - data: { - label: '1', - }, - }, - { - id: '2', - data: { - label: '2', - }, - }, - { - id: '3', - data: { - label: '3', - }, - }, - { - id: '4', - data: { - label: '4', - }, - }, - { - id: '5', - data: { - label: '5', - }, - }, - { - id: '6', - data: { - label: '6', - }, - }, - { - id: '7', - data: { - label: '7', - }, - }, - { - id: '8', - data: { - label: '8', - }, - }, - { - id: '9', - data: { - label: '9', - }, - }, - { - id: '10', - data: { - label: '10', - }, - }, - { - id: '11', - data: { - label: '11', - }, - }, - { - id: '12', - data: { - label: '12', - }, - }, - { - id: '13', - data: { - label: '13', - }, - }, - { - id: '14', - data: { - label: '14', - }, - }, - { - id: '15', - data: { - label: '15', - }, - }, - { - id: '16', - data: { - label: '16', - }, - }, - { - id: '17', - data: { - label: '17', - }, - }, - { - id: '18', - data: { - label: '18', - }, - }, - { - id: '19', - data: { - label: '19', - }, - }, - { - id: '20', - data: { - label: '20', - }, - }, - { - id: '21', - data: { - label: '21', - }, - }, - { - id: '22', - data: { - label: '22', - }, - }, - { - id: '23', - data: { - label: '23', - }, - }, - { - id: '24', - data: { - label: '24', - }, - }, - { - id: '25', - data: { - label: '25', - }, - }, - { - id: '26', - data: { - label: '26', - }, - }, - { - id: '27', - data: { - label: '27', - }, - }, - { - id: '28', - data: { - label: '28', - }, - }, - { - id: '29', - data: { - label: '29', - }, - }, - { - id: '30', - data: { - label: '30', - }, - }, - { - id: '31', - data: { - label: '31', - }, - }, - { - id: '32', - data: { - label: '32', - }, - }, - { - id: '33', - data: { - label: '33', - }, - }, - ], - edges: [ - { - id: 'edge-866', - source: '0', - target: '1', - }, - { - id: 'edge-435', - source: '0', - target: '2', - }, - { - id: 'edge-743', - source: '0', - target: '3', - }, - { - id: 'edge-208', - source: '0', - target: '4', - }, - { - id: 'edge-773', - source: '0', - target: '5', - }, - { - id: 'edge-481', - source: '0', - target: '7', - }, - { - id: 'edge-355', - source: '0', - target: '8', - }, - { - id: 'edge-430', - source: '0', - target: '9', - }, - { - id: 'edge-938', - source: '0', - target: '10', - }, - { - id: 'edge-554', - source: '0', - target: '11', - }, - { - id: 'edge-820', - source: '0', - target: '13', - }, - { - id: 'edge-904', - source: '0', - target: '14', - }, - { - id: 'edge-223', - source: '0', - target: '15', - }, - { - id: 'edge-230', - source: '0', - target: '16', - }, - { - id: 'edge-441', - source: '2', - target: '3', - }, - { - id: 'edge-808', - source: '4', - target: '5', - }, - { - id: 'edge-990', - source: '4', - target: '6', - }, - { - id: 'edge-495', - source: '5', - target: '6', - }, - { - id: 'edge-723', - source: '7', - target: '13', - }, - { - id: 'edge-438', - source: '8', - target: '14', - }, - { - id: 'edge-196', - source: '9', - target: '10', - }, - { - id: 'edge-642', - source: '10', - target: '22', - }, - { - id: 'edge-355', - source: '10', - target: '14', - }, - { - id: 'edge-596', - source: '10', - target: '12', - }, - { - id: 'edge-59', - source: '10', - target: '24', - }, - { - id: 'edge-274', - source: '10', - target: '21', - }, - { - id: 'edge-730', - source: '10', - target: '20', - }, - { - id: 'edge-964', - source: '11', - target: '24', - }, - { - id: 'edge-555', - source: '11', - target: '22', - }, - { - id: 'edge-406', - source: '11', - target: '14', - }, - { - id: 'edge-259', - source: '12', - target: '13', - }, - { - id: 'edge-952', - source: '16', - target: '17', - }, - { - id: 'edge-569', - source: '16', - target: '18', - }, - { - id: 'edge-246', - source: '16', - target: '21', - }, - { - id: 'edge-540', - source: '16', - target: '22', - }, - { - id: 'edge-747', - source: '17', - target: '18', - }, - { - id: 'edge-800', - source: '17', - target: '20', - }, - { - id: 'edge-484', - source: '18', - target: '19', - }, - { - id: 'edge-418', - source: '19', - target: '20', - }, - { - id: 'edge-714', - source: '19', - target: '33', - }, - { - id: 'edge-600', - source: '19', - target: '22', - }, - { - id: 'edge-717', - source: '19', - target: '23', - }, - { - id: 'edge-306', - source: '20', - target: '21', - }, - { - id: 'edge-599', - source: '21', - target: '22', - }, - { - id: 'edge-413', - source: '22', - target: '24', - }, - { - id: 'edge-281', - source: '22', - target: '25', - }, - { - id: 'edge-182', - source: '22', - target: '26', - }, - { - id: 'edge-285', - source: '22', - target: '23', - }, - { - id: 'edge-553', - source: '22', - target: '28', - }, - { - id: 'edge-55', - source: '22', - target: '30', - }, - { - id: 'edge-823', - source: '22', - target: '31', - }, - { - id: 'edge-996', - source: '22', - target: '32', - }, - { - id: 'edge-323', - source: '22', - target: '33', - }, - { - id: 'edge-462', - source: '23', - target: '28', - }, - { - id: 'edge-476', - source: '23', - target: '27', - }, - { - id: 'edge-446', - source: '23', - target: '29', - }, - { - id: 'edge-273', - source: '23', - target: '30', - }, - { - id: 'edge-564', - source: '23', - target: '31', - }, - { - id: 'edge-623', - source: '23', - target: '33', - }, - { - id: 'edge-714', - source: '32', - target: '33', - }, - ], -}; - -const data2 = { - nodes: [ - { - id: 'b0', - data: { - label: '0', - }, - }, - { - id: 'b1', - data: { - label: '1', - }, - }, - { - id: 'b2', - data: { - label: '2', - }, - }, - { - id: 'b3', - data: { - label: '3', - }, - }, - { - id: 'b4', - data: { - label: '4', - }, - }, - { - id: 'b5', - data: { - label: '5', - }, - }, - ], - edges: [ - { - id: 'edge-842', - source: 'b0', - target: 'b1', - }, - { - id: 'edge-862', - source: 'b0', - target: 'b2', - }, - { - id: 'edge-408', - source: 'b0', - target: 'b3', - }, - { - id: 'edge-215', - source: 'b0', - target: 'b4', - }, - { - id: 'edge-379', - source: 'b0', - target: 'b5', - }, - ], -}; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; -const graph = new Graph({ - container, - width, - height, - modes: { - default: ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'], - }, - layout: { - type: 'force', - animated: true, - linkDistance: 100, - preventOverlap: true, - }, - edge: { - keyShape: { - endArrow: true, - }, - }, - data, -}); - -let currentData = data; - -const btn = document.createElement('a'); -btn.style.position = 'absolute'; -btn.innerHTML = '👉 Change Data'; -btn.style.fontSize = '20px'; -btn.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; -btn.style.border = '2px solid #873bf4'; -btn.style.padding = '4px 8px'; -container.appendChild(btn); -btn.addEventListener('click', async () => { - currentData = currentData === data2 ? data : data2; - graph.changeData(currentData); -}); - -window.graph = graph; diff --git a/packages/site/examples/layout/layoutMechanism/demo/layoutTiming.js b/packages/site/examples/layout/layoutMechanism/demo/layoutTiming.js deleted file mode 100644 index ded78ec921..0000000000 --- a/packages/site/examples/layout/layoutMechanism/demo/layoutTiming.js +++ /dev/null @@ -1,51 +0,0 @@ -import { Graph } from '@antv/g6'; - -const tipDiv = document.createElement('div'); -const container = document.getElementById('container'); -container.appendChild(tipDiv); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4b9bcbc25f.json') - .then((res) => res.json()) - .then((data) => { - const graph = new Graph({ - container: 'container', - width, - height, - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - layout: { - type: 'force', - preventOverlap: true, - nodeSize: 32, - workerEnabled: true, - }, - modes: { - default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], - }, - node: { - keyShape: { - r: 6, - }, - }, - edge: { - keyShape: { - opacity: 0.3, - }, - }, - data, - }); - graph.on('beforelayout', function () { - tipDiv.innerHTML = 'Doing force-directed layout... the text will be changed after the layout being done.'; - }); - graph.on('afterlayout', function () { - tipDiv.innerHTML = 'Done!'; - }); - -window.graph = graph; - }); diff --git a/packages/site/examples/layout/layoutMechanism/demo/layoutTranslate.js b/packages/site/examples/layout/layoutMechanism/demo/layoutTranslate.js deleted file mode 100644 index 296be6927f..0000000000 --- a/packages/site/examples/layout/layoutMechanism/demo/layoutTranslate.js +++ /dev/null @@ -1,108 +0,0 @@ -import { Graph, Extensions, extend } from '@antv/g6'; - -const ExtGraph = extend(Graph, { - layouts: { - mds: Extensions.MDSLayout, - radial: Extensions.RadialLayout, - }, - behaviors: { - 'brush-select': Extensions.BrushSelect, - }, -}); - -const width = container.scrollWidth; -const height = (container.scrollHeight || 500) - 20; - -const layoutConfigs = { - Circular: { - type: 'circular', - }, - Grid: { - type: 'grid', - }, - Force: { - type: 'force', - preventOverlap: true, - }, - Radial: { - type: 'radial', - preventOverlap: true, - }, - Concentric: { - type: 'concentric', - }, - MDS: { - type: 'mds', - linkDistance: 100, - }, -}; - -fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json') - .then((res) => res.json()) - .then((data) => { - const graph = new ExtGraph({ - container: 'container', - width, - height, - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - layout: layoutConfigs.Circular, - modes: { - default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select', 'brush-select'], - }, - node: (model) => { - return { - id: model.id, - data: { - ...model.data, - labelShape: { - text: model.id, - }, - labelBackgroundShape: {}, - animates: { - update: [ - { - fields: ['x', 'y'], - shapeId: 'group', - }, - { - fields: ['opacity'], - shapeId: 'haloShape', - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - }, - ], - }, - }, - }; - }, - data, - }); - - window.graph = graph; - - const btnContainer = document.createElement('div'); - btnContainer.style.position = 'absolute'; - container.appendChild(btnContainer); - const tip = document.createElement('span'); - tip.innerHTML = '👉 Change layoutConfigs:'; - btnContainer.appendChild(tip); - - Object.keys(layoutConfigs).forEach((name, i) => { - const btn = document.createElement('a'); - btn.innerHTML = name; - btn.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; - btn.style.padding = '4px'; - btn.style.marginLeft = i > 0 ? '24px' : '8px'; - btnContainer.appendChild(btn); - btn.addEventListener('click', () => { - graph.layout(layoutConfigs[name]); - }); - }); - }); diff --git a/packages/site/examples/layout/layoutMechanism/demo/meta.json b/packages/site/examples/layout/layoutMechanism/demo/meta.json deleted file mode 100644 index a5cea262e0..0000000000 --- a/packages/site/examples/layout/layoutMechanism/demo/meta.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "title": { - "zh": "中文分类", - "en": "Category" - }, - "demos": [ - { - "filename": "layoutTranslate.js", - "title": { - "zh": "布局切换", - "en": "Layout Translate" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aGiCRrsJeCUAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "subgraphLayout.js", - "title": { - "zh": "子图布局", - "en": "Subgraph Layout" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*RDoPRohHU_gAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "dataChange.js", - "title": { - "zh": "数据动态切换", - "en": "Change Data" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Cq8SRL2NZtYAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "customBigraph.js", - "title": { - "zh": "自定义二分图布局", - "en": "Custom Bigraph Layout" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*G4-YT4NDA2oAAAAAAAAAAAAADmJ7AQ/original" - }, - { - "filename": "layoutTiming.js", - "title": { - "zh": "布局时机监听", - "en": "Layout Listener" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*MOhtRqDDV6oAAAAAAAAAAAAADmJ7AQ/original" - } - ] -} diff --git a/packages/site/examples/layout/layoutMechanism/demo/subgraphLayout.js b/packages/site/examples/layout/layoutMechanism/demo/subgraphLayout.js deleted file mode 100644 index f37a1f7f12..0000000000 --- a/packages/site/examples/layout/layoutMechanism/demo/subgraphLayout.js +++ /dev/null @@ -1,626 +0,0 @@ -import { Graph, Extensions } from '@antv/g6'; -import { Graph as GraphCore } from '@antv/graphlib'; - -const data = { - nodes: [ - { - id: '0', - data: { - label: '0', - subGraph: '1', - }, - }, - { - id: '1', - data: { - label: '1', - subGraph: '1', - }, - }, - { - id: '2', - data: { - label: '2', - subGraph: '1', - }, - }, - { - id: '3', - data: { - label: '3', - subGraph: '1', - }, - }, - { - id: '4', - data: { - label: '4', - subGraph: '1', - }, - }, - { - id: '5', - data: { - label: '5', - subGraph: '1', - }, - }, - { - id: '6', - data: { - label: '6', - subGraph: '1', - }, - }, - { - id: '7', - data: { - label: '7', - subGraph: '1', - }, - }, - { - id: '8', - data: { - label: '8', - subGraph: '1', - }, - }, - { - id: '9', - data: { - label: '9', - subGraph: '1', - }, - }, - { - id: '10', - data: { - label: '10', - subGraph: '1', - }, - }, - { - id: '11', - data: { - label: '11', - subGraph: '1', - }, - }, - { - id: '12', - data: { - label: '12', - subGraph: '0', - }, - }, - { - id: '13', - data: { - label: '13', - subGraph: '1', - }, - }, - { - id: '14', - data: { - label: '14', - subGraph: '1', - }, - }, - { - id: '15', - data: { - label: '15', - subGraph: '1', - }, - }, - { - id: '16', - data: { - label: '16', - subGraph: '0', - }, - }, - { - id: '17', - data: { - label: '17', - subGraph: '0', - }, - }, - { - id: '18', - data: { - label: '18', - subGraph: '0', - }, - }, - { - id: '19', - data: { - label: '19', - subGraph: '0', - }, - }, - { - id: '20', - data: { - label: '20', - subGraph: '0', - }, - }, - { - id: '21', - data: { - label: '21', - subGraph: '0', - }, - }, - { - id: '22', - data: { - label: '22', - subGraph: '0', - }, - }, - { - id: '23', - data: { - label: '23', - subGraph: '0', - }, - }, - { - id: '24', - data: { - label: '24', - subGraph: '0', - }, - }, - { - id: '25', - data: { - label: '25', - subGraph: '0', - }, - }, - { - id: '26', - data: { - label: '26', - subGraph: '0', - }, - }, - { - id: '27', - data: { - label: '27', - subGraph: '0', - }, - }, - { - id: '28', - data: { - label: '28', - subGraph: '0', - }, - }, - { - id: '29', - data: { - label: '29', - subGraph: '0', - }, - }, - { - id: '30', - data: { - label: '30', - subGraph: '0', - }, - }, - { - id: '31', - data: { - label: '31', - subGraph: '0', - }, - }, - { - id: '32', - data: { - label: '32', - subGraph: '0', - }, - }, - { - id: '33', - data: { - label: '33', - subGraph: '0', - }, - }, - ], - edges: [ - { - id: 'edge-179', - source: '0', - target: '1', - }, - { - id: 'edge-811', - source: '0', - target: '2', - }, - { - id: 'edge-168', - source: '0', - target: '3', - }, - { - id: 'edge-430', - source: '0', - target: '4', - }, - { - id: 'edge-492', - source: '0', - target: '5', - }, - { - id: 'edge-261', - source: '0', - target: '7', - }, - { - id: 'edge-794', - source: '0', - target: '8', - }, - { - id: 'edge-898', - source: '0', - target: '9', - }, - { - id: 'edge-719', - source: '0', - target: '10', - }, - { - id: 'edge-114', - source: '0', - target: '11', - }, - { - id: 'edge-514', - source: '0', - target: '13', - }, - { - id: 'edge-248', - source: '0', - target: '14', - }, - { - id: 'edge-913', - source: '0', - target: '15', - }, - { - id: 'edge-472', - source: '0', - target: '16', - }, - { - id: 'edge-986', - source: '2', - target: '3', - }, - { - id: 'edge-356', - source: '4', - target: '5', - }, - { - id: 'edge-776', - source: '4', - target: '6', - }, - { - id: 'edge-650', - source: '5', - target: '6', - }, - { - id: 'edge-949', - source: '7', - target: '13', - }, - { - id: 'edge-531', - source: '8', - target: '14', - }, - { - id: 'edge-869', - source: '9', - target: '10', - }, - { - id: 'edge-777', - source: '10', - target: '22', - }, - { - id: 'edge-339', - source: '10', - target: '14', - }, - { - id: 'edge-122', - source: '10', - target: '12', - }, - { - id: 'edge-691', - source: '10', - target: '24', - }, - { - id: 'edge-484', - source: '10', - target: '21', - }, - { - id: 'edge-300', - source: '10', - target: '20', - }, - { - id: 'edge-493', - source: '11', - target: '24', - }, - { - id: 'edge-626', - source: '11', - target: '22', - }, - { - id: 'edge-134', - source: '11', - target: '14', - }, - { - id: 'edge-316', - source: '12', - target: '13', - }, - { - id: 'edge-212', - source: '16', - target: '17', - }, - { - id: 'edge-195', - source: '16', - target: '18', - }, - { - id: 'edge-639', - source: '16', - target: '21', - }, - { - id: 'edge-742', - source: '16', - target: '22', - }, - { - id: 'edge-113', - source: '17', - target: '18', - }, - { - id: 'edge-538', - source: '17', - target: '20', - }, - { - id: 'edge-301', - source: '18', - target: '19', - }, - { - id: 'edge-449', - source: '19', - target: '20', - }, - { - id: 'edge-541', - source: '19', - target: '33', - }, - { - id: 'edge-138', - source: '19', - target: '22', - }, - { - id: 'edge-841', - source: '19', - target: '23', - }, - { - id: 'edge-881', - source: '20', - target: '21', - }, - { - id: 'edge-854', - source: '21', - target: '22', - }, - { - id: 'edge-255', - source: '22', - target: '24', - }, - { - id: 'edge-945', - source: '22', - target: '25', - }, - { - id: 'edge-119', - source: '22', - target: '26', - }, - { - id: 'edge-700', - source: '22', - target: '23', - }, - { - id: 'edge-327', - source: '22', - target: '28', - }, - { - id: 'edge-685', - source: '22', - target: '30', - }, - { - id: 'edge-359', - source: '22', - target: '31', - }, - { - id: 'edge-930', - source: '22', - target: '32', - }, - { - id: 'edge-998', - source: '22', - target: '33', - }, - { - id: 'edge-796', - source: '23', - target: '28', - }, - { - id: 'edge-518', - source: '23', - target: '27', - }, - { - id: 'edge-778', - source: '23', - target: '29', - }, - { - id: 'edge-851', - source: '23', - target: '30', - }, - { - id: 'edge-483', - source: '23', - target: '31', - }, - { - id: 'edge-335', - source: '23', - target: '33', - }, - { - id: 'edge-689', - source: '32', - target: '33', - }, - ], -}; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; -const graph = new Graph({ - container: 'container', - width, - height, - autoFit: 'view', - modes: { - default: ['drag-node', 'zoom-canvas', 'drag-canvas', 'click-select'], - }, - theme: { - type: 'spec', - specification: { - node: { - dataTypeField: 'cluster', - }, - }, - }, - node: { - labelBackgroundShape: {}, - }, - data, -}); - -window.graph = graph; - -const btn = document.createElement('a'); -btn.style.position = 'absolute'; -btn.innerHTML = '👉 Layout Subgraph'; -btn.style.fontSize = '20px'; -btn.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; -btn.style.border = '2px solid #873bf4'; -btn.style.padding = '4px 8px'; -container.appendChild(btn); - -btn.addEventListener('click', async () => { - const subGridLayout = new Extensions.GridLayout({ - begin: [width / 5, height / 5], - }); - const subgraphNodes0 = graph.getAllNodesData().filter((node) => node.data.subGraph === '0'); - const subgraphData0 = { - nodes: subgraphNodes0, - edges: graph - .getAllEdgesData() - .filter( - (edge) => - subgraphNodes0.find((node) => node.id === edge.source) && - subgraphNodes0.find((node) => node.id === edge.target), - ), - }; - const gridPositions = await subGridLayout.execute(new GraphCore(subgraphData0)); - graph.updateNodePosition(gridPositions.nodes); - - const subForceLayout = new Extensions.ForceLayout({ - center: [(width / 3) * 2, (height / 3) * 2], - linkDistance: 100, - maxSpeed: 100, - preventOverlap: true, - nodeSize: 32, - onTick: function tick(positions) { - // the tick function to show the animation of layout process - graph.updateNodePosition(positions.nodes); - }, - }); - const subgraphNodes1 = graph.getAllNodesData().filter((node) => node.data.subGraph === '1'); - const subgraphData1 = { - nodes: subgraphNodes1, - edges: graph - .getAllEdgesData() - .filter( - (edge) => - subgraphNodes1.find((node) => node.id === edge.source) && - subgraphNodes1.find((node) => node.id === edge.target), - ), - }; - subForceLayout.execute(new GraphCore(subgraphData1)); -}); diff --git a/packages/site/examples/layout/layoutMechanism/demo/sublayoutPipes.js b/packages/site/examples/layout/layoutMechanism/demo/sublayoutPipes.js deleted file mode 100644 index 9b0bf926c3..0000000000 --- a/packages/site/examples/layout/layoutMechanism/demo/sublayoutPipes.js +++ /dev/null @@ -1,159 +0,0 @@ -// TODO: skip this demo temporary since pipes is not supported in beta yet. - -import { Graph } from '@antv/g6'; - -const data = { nodes: [], edges: [] }; -for (let i = 0; i < 32; i++) { - data.nodes.push({ - id: `${i}`, - label: i < 17 ? `employee-${i}` : `company-${i - 17}`, - dataType: i < 17 ? 'employee' : 'company', - style: - i < 17 - ? { stroke: '#5D7092', fill: '#5D7092', fillOpacity: 0.5 } - : { stroke: '#5B8FF9', fill: '#5B8FF9', fillOpacity: 0.5 }, - }); -} -data.edges = [ - { source: '0', target: '1' }, - { source: '0', target: '2' }, - { source: '0', target: '3' }, - { source: '0', target: '4' }, - { source: '0', target: '5' }, - { source: '0', target: '6' }, - { source: '1', target: '2' }, - { source: '1', target: '3' }, - { source: '1', target: '4' }, - { source: '1', target: '5' }, - { source: '1', target: '6' }, - { source: '2', target: '3' }, - { source: '2', target: '4' }, - { source: '2', target: '5' }, - { source: '2', target: '6' }, - - { source: '7', target: '8' }, - { source: '8', target: '9' }, - { source: '9', target: '10' }, - - { source: '11', target: '12' }, - { source: '12', target: '13' }, - { source: '13', target: '14' }, - { source: '14', target: '15' }, - { source: '15', target: '16' }, - { source: '11', target: '14' }, - - { source: '31', target: '11' }, - { source: '24', target: '4' }, - { source: '23', target: '7' }, -]; - -const legendData = { - nodes: [ - { id: 'employee', label: 'employee', style: { stroke: '#5D7092', fill: '#5D7092' } }, - { id: 'company', label: 'company', style: { stroke: '#5B8FF9', fill: '#5B8FF9' } }, - ], - edges: [], -}; - -const legend = new G6.Legend({ - data: legendData, - align: 'center', - layout: 'horizontal', // vertical - position: 'bottom-left', - vertiSep: 12, - horiSep: 24, - offsetY: -24, - padding: [4, 16, 8, 16], - containerStyle: { - fill: '#ccc', - lineWidth: 1, - }, - title: 'Legend', - titleConfig: { - position: 'left', - offsetX: 0, - offsetY: 12, - }, - filter: { - enable: true, - multiple: true, - trigger: 'click', - graphActiveState: 'activeByLegend', - graphInactiveState: 'inactiveByLegend', - filterFunctions: { - a: (d) => { - if (d.cluster === 'a') return true; - return false; - }, - b: (d) => { - if (d.cluster === 'b') return true; - return false; - }, - c: (d) => { - if (d.cluster === 'c') return true; - return false; - }, - d: (d) => { - if (d.cluster === 'd') return true; - return false; - }, - }, - }, -}); - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; -const graph = new Graph({ - container: 'container', - width, - height, - modes: { - default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], - }, - plugins: [legend], - animate: true, - nodeStateStyles: { - activeByLegend: { - lineWidth: 5, - strokeOpacity: 0.5, - stroke: '#f00', - }, - inactiveByLegend: { - opacity: 0.5, - }, - }, - layout: { - pipes: [ - { - type: 'circular', - nodesFilter: (node) => +node.id <= 6, - center: [(width / 5) * 4 - 30, height / 2], - radius: width / 10, - }, - { - type: 'circular', - nodesFilter: (node) => +node.id >= 7 && +node.id <= 10, - center: [width / 20 + 30, (height / 3) * 2], - radius: width / 20, - }, - { - type: 'circular', - nodesFilter: (node) => +node.id >= 11 && +node.id <= 16, - center: [width / 20 + 30, height / 3], - radius: width / 20, - }, - { - type: 'grid', - nodesFilter: (node) => +node.id > 16, - begin: [width / 10 + 50, 20], - width: (width / 5) * 3 - 100, - height: height - 40, - }, - ], - }, -}); -graph.data(data); -graph.render(); - -window.graph = graph; diff --git a/packages/site/examples/layout/layoutMechanism/index.en.md b/packages/site/examples/layout/layoutMechanism/index.en.md deleted file mode 100644 index afedc6bc2d..0000000000 --- a/packages/site/examples/layout/layoutMechanism/index.en.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Layout Mechanism -order: 15 ---- - -G6 provides the mechanism for layout paramters translation, layout methods translation, data translation, subgraph layout, layout timing for listener, custom layout, and so on. - -## Usage - -- Example 1 : Subgrpah(red nodes) layout by force-directed layout. -- Example 2 : Apply different layouts for subgraphs in the same time. -- Example 3 : Tranlate the layout parameters in dynamic. -- Example 4 : Custom layout for a bigraph. -- Example 5 : Layout timing events —— `beforelayout` and `afterlayout`. diff --git a/packages/site/examples/layout/layoutMechanism/index.zh.md b/packages/site/examples/layout/layoutMechanism/index.zh.md deleted file mode 100644 index 0d851cccf4..0000000000 --- a/packages/site/examples/layout/layoutMechanism/index.zh.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: 布局机制 -order: 15 ---- - -G6 为用户提供了布局参数动态切换、布局方法动态切换、数据动态切换、子图布局、布局时机监听、自定义布局等布局相关等机制。 - -## 使用指南 - -- 代码演示 1 ：控制子图（红色节点）使用经典力导向算法进行子图布局。 -- 代码演示 2 ：同时设置不同的子图布局。 -- 代码演示 3 ：布局数据可以动态切换。 -- 代码演示 4 ：G6 提供了自定义布局机制，可以随心所欲定制自己的布局。 -- 代码演示 5 ：G6 开放了布局的监听时机 —— `beforelayout` 与 `afterlayout`。 diff --git a/packages/site/examples/layout/mds/demo/basic.js b/packages/site/examples/layout/mds/demo/basic.js new file mode 100644 index 0000000000..cb9303cd73 --- /dev/null +++ b/packages/site/examples/layout/mds/demo/basic.js @@ -0,0 +1,32 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/cluster.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + padding: 20, + autoFit: 'view', + data, + layout: { + type: 'mds', + linkDistance: 100, + }, + node: { + style: { + size: 20, + stroke: '#9ec9ff', + fill: '#eee', + lineWidth: 1, + labelText: (d) => d.id, + labelFontSize: 12, + labelPlacement: 'center', + labelBackground: false, + }, + }, + behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'], + animation: true, + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/mdsLayout/demo/meta.json b/packages/site/examples/layout/mds/demo/meta.json similarity index 90% rename from packages/site/examples/layout/mdsLayout/demo/meta.json rename to packages/site/examples/layout/mds/demo/meta.json index 430249042b..91895a4250 100644 --- a/packages/site/examples/layout/mdsLayout/demo/meta.json +++ b/packages/site/examples/layout/mds/demo/meta.json @@ -5,7 +5,7 @@ }, "demos": [ { - "filename": "basicMDS.ts", + "filename": "basic.js", "title": { "zh": "基本 MDS 布局", "en": "Basic MDS Layout" diff --git a/packages/site/examples/layout/mds/index.en.md b/packages/site/examples/layout/mds/index.en.md new file mode 100644 index 0000000000..09a9867b75 --- /dev/null +++ b/packages/site/examples/layout/mds/index.en.md @@ -0,0 +1,4 @@ +--- +title: MDS Layout +order: 12 +--- diff --git a/packages/site/examples/layout/mds/index.zh.md b/packages/site/examples/layout/mds/index.zh.md new file mode 100644 index 0000000000..87d829cf54 --- /dev/null +++ b/packages/site/examples/layout/mds/index.zh.md @@ -0,0 +1,4 @@ +--- +title: MDS 布局 +order: 12 +--- diff --git a/packages/site/examples/layout/mdsLayout/API.en.md b/packages/site/examples/layout/mdsLayout/API.en.md deleted file mode 100644 index 6286006102..0000000000 --- a/packages/site/examples/layout/mdsLayout/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/mdsLayout/API.zh.md b/packages/site/examples/layout/mdsLayout/API.zh.md deleted file mode 100644 index 8e6f406246..0000000000 --- a/packages/site/examples/layout/mdsLayout/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/mdsLayout/demo/basicMDS.ts b/packages/site/examples/layout/mdsLayout/demo/basicMDS.ts deleted file mode 100644 index 9e3d3cc8f6..0000000000 --- a/packages/site/examples/layout/mdsLayout/demo/basicMDS.ts +++ /dev/null @@ -1,599 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - data: { - label: '0', - }, - }, - { - id: '1', - data: { - label: '1', - }, - }, - { - id: '2', - data: { - label: '2', - }, - }, - { - id: '3', - data: { - label: '3', - }, - }, - { - id: '4', - data: { - label: '4', - }, - }, - { - id: '5', - data: { - label: '5', - }, - }, - { - id: '6', - data: { - label: '6', - }, - }, - { - id: '7', - data: { - label: '7', - }, - }, - { - id: '8', - data: { - label: '8', - }, - }, - { - id: '9', - data: { - label: '9', - }, - }, - { - id: '10', - data: { - label: '10', - }, - }, - { - id: '11', - data: { - label: '11', - }, - }, - { - id: '12', - data: { - label: '12', - }, - }, - { - id: '13', - data: { - label: '13', - }, - }, - { - id: '14', - data: { - label: '14', - }, - }, - { - id: '15', - data: { - label: '15', - }, - }, - { - id: '16', - data: { - label: '16', - }, - }, - { - id: '17', - data: { - label: '17', - }, - }, - { - id: '18', - data: { - label: '18', - }, - }, - { - id: '19', - data: { - label: '19', - }, - }, - { - id: '20', - data: { - label: '20', - }, - }, - { - id: '21', - data: { - label: '21', - }, - }, - { - id: '22', - data: { - label: '22', - }, - }, - { - id: '23', - data: { - label: '23', - }, - }, - { - id: '24', - data: { - label: '24', - }, - }, - { - id: '25', - data: { - label: '25', - }, - }, - { - id: '26', - data: { - label: '26', - }, - }, - { - id: '27', - data: { - label: '27', - }, - }, - { - id: '28', - data: { - label: '28', - }, - }, - { - id: '29', - data: { - label: '29', - }, - }, - { - id: '30', - data: { - label: '30', - }, - }, - { - id: '31', - data: { - label: '31', - }, - }, - { - id: '32', - data: { - label: '32', - }, - }, - { - id: '33', - data: { - label: '33', - }, - }, - ], - edges: [ - { - id: 'edge-667', - source: '0', - target: '1', - data: {}, - }, - { - id: 'edge-997', - source: '0', - target: '2', - data: {}, - }, - { - id: 'edge-422', - source: '0', - target: '3', - data: {}, - }, - { - id: 'edge-188', - source: '0', - target: '4', - data: {}, - }, - { - id: 'edge-332', - source: '0', - target: '5', - data: {}, - }, - { - id: 'edge-148', - source: '0', - target: '7', - data: {}, - }, - { - id: 'edge-883', - source: '0', - target: '8', - data: {}, - }, - { - id: 'edge-532', - source: '0', - target: '9', - data: {}, - }, - { - id: 'edge-968', - source: '0', - target: '10', - data: {}, - }, - { - id: 'edge-965', - source: '0', - target: '11', - data: {}, - }, - { - id: 'edge-285', - source: '0', - target: '13', - data: {}, - }, - { - id: 'edge-320', - source: '0', - target: '14', - data: {}, - }, - { - id: 'edge-644', - source: '0', - target: '15', - data: {}, - }, - { - id: 'edge-208', - source: '0', - target: '16', - data: {}, - }, - { - id: 'edge-690', - source: '2', - target: '3', - data: {}, - }, - { - id: 'edge-481', - source: '4', - target: '5', - data: {}, - }, - { - id: 'edge-956', - source: '4', - target: '6', - data: {}, - }, - { - id: 'edge-344', - source: '5', - target: '6', - data: {}, - }, - { - id: 'edge-618', - source: '7', - target: '13', - data: {}, - }, - { - id: 'edge-793', - source: '8', - target: '14', - data: {}, - }, - { - id: 'edge-330', - source: '9', - target: '10', - data: {}, - }, - { - id: 'edge-977', - source: '10', - target: '22', - data: {}, - }, - { - id: 'edge-633', - source: '10', - target: '14', - data: {}, - }, - { - id: 'edge-809', - source: '10', - target: '12', - data: {}, - }, - { - id: 'edge-535', - source: '10', - target: '24', - data: {}, - }, - { - id: 'edge-665', - source: '10', - target: '21', - data: {}, - }, - { - id: 'edge-202', - source: '10', - target: '20', - data: {}, - }, - { - id: 'edge-803', - source: '11', - target: '24', - data: {}, - }, - { - id: 'edge-276', - source: '11', - target: '22', - data: {}, - }, - { - id: 'edge-588', - source: '11', - target: '14', - data: {}, - }, - { - id: 'edge-709', - source: '12', - target: '13', - data: {}, - }, - { - id: 'edge-207', - source: '16', - target: '17', - data: {}, - }, - { - id: 'edge-795', - source: '16', - target: '18', - data: {}, - }, - { - id: 'edge-321', - source: '16', - target: '21', - data: {}, - }, - { - id: 'edge-97', - source: '16', - target: '22', - data: {}, - }, - { - id: 'edge-522', - source: '17', - target: '18', - data: {}, - }, - { - id: 'edge-368', - source: '17', - target: '20', - data: {}, - }, - { - id: 'edge-769', - source: '18', - target: '19', - data: {}, - }, - { - id: 'edge-673', - source: '19', - target: '20', - data: {}, - }, - { - id: 'edge-589', - source: '19', - target: '33', - data: {}, - }, - { - id: 'edge-574', - source: '19', - target: '22', - data: {}, - }, - { - id: 'edge-466', - source: '19', - target: '23', - data: {}, - }, - { - id: 'edge-400', - source: '20', - target: '21', - data: {}, - }, - { - id: 'edge-552', - source: '21', - target: '22', - data: {}, - }, - { - id: 'edge-192', - source: '22', - target: '24', - data: {}, - }, - { - id: 'edge-119', - source: '22', - target: '25', - data: {}, - }, - { - id: 'edge-305', - source: '22', - target: '26', - data: {}, - }, - { - id: 'edge-518', - source: '22', - target: '23', - data: {}, - }, - { - id: 'edge-950', - source: '22', - target: '28', - data: {}, - }, - { - id: 'edge-57', - source: '22', - target: '30', - data: {}, - }, - { - id: 'edge-634', - source: '22', - target: '31', - data: {}, - }, - { - id: 'edge-875', - source: '22', - target: '32', - data: {}, - }, - { - id: 'edge-559', - source: '22', - target: '33', - data: {}, - }, - { - id: 'edge-894', - source: '23', - target: '28', - data: {}, - }, - { - id: 'edge-831', - source: '23', - target: '27', - data: {}, - }, - { - id: 'edge-172', - source: '23', - target: '29', - data: {}, - }, - { - id: 'edge-137', - source: '23', - target: '30', - data: {}, - }, - { - id: 'edge-136', - source: '23', - target: '31', - data: {}, - }, - { - id: 'edge-878', - source: '23', - target: '33', - data: {}, - }, - { - id: 'edge-121', - source: '32', - target: '33', - data: {}, - }, - ], -}; - -const graph = new Graph({ - container: 'container', - padding: 20, - autoFit: 'view', - data, - layout: { - type: 'mds', - linkDistance: 100, - }, - node: { - style: { - size: 20, - stroke: '#9ec9ff', - fill: '#eee', - lineWidth: 1, - labelText: (d) => d.id, - labelFontSize: 12, - labelPlacement: 'center', - labelBackground: false, - }, - }, - behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas', 'click-select'], - animation: true, -}); - -graph.render(); diff --git a/packages/site/examples/layout/mdsLayout/index.en.md b/packages/site/examples/layout/mdsLayout/index.en.md deleted file mode 100644 index b5cd8b4ba9..0000000000 --- a/packages/site/examples/layout/mdsLayout/index.en.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: MDS Layout -order: 12 ---- - -Classical MDS（Multidemensional Scaling）is an algorithm for high dimensional data projection. Relational data layout problem can be regarded as projecting high dimensional data onto a 2D visual space. - -## Usage - -As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/sub-layout). By tuning the parameters, you can adjust the edge length. diff --git a/packages/site/examples/layout/mdsLayout/index.zh.md b/packages/site/examples/layout/mdsLayout/index.zh.md deleted file mode 100644 index 206a4ec88d..0000000000 --- a/packages/site/examples/layout/mdsLayout/index.zh.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: MDS 布局 -order: 12 ---- - -MDS（Multidemensional Scaling）本是用于高维数据降维的算法。关系图数据可视化中的布局可以看作是高维数据降维到二维屏幕空间中。 - -## 使用指南 - -G6 内置的 MDS 布局可在实例化 Graph 时使用该布局。除此之外，还可以如[子图布局](/zh/docs/manual/middle/layout/sub-layout)所示单独使用布局。该算法可配置边的长度。 diff --git a/packages/site/examples/layout/mechanism/demo/change-data.js b/packages/site/examples/layout/mechanism/demo/change-data.js new file mode 100644 index 0000000000..b4f3a1847b --- /dev/null +++ b/packages/site/examples/layout/mechanism/demo/change-data.js @@ -0,0 +1,44 @@ +import { Graph } from '@antv/g6'; + +const fetchData = async (type) => { + if (type === 'large') { + const data = await fetch('https://assets.antv.antgroup.com/g6/cluster.json').then((res) => res.json()); + return data; + } + return { + nodes: [{ id: 'b0' }, { id: 'b1' }, { id: 'b2' }, { id: 'b3' }, { id: 'b4' }, { id: 'b5' }], + edges: [ + { source: 'b0', target: 'b1' }, + { source: 'b0', target: 'b2' }, + { source: 'b0', target: 'b3' }, + { source: 'b0', target: 'b4' }, + { source: 'b0', target: 'b5' }, + ], + }; +}; + +fetchData('small').then((data) => { + const graph = new Graph({ + container: 'container', + animation: true, + behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'], + layout: { + type: 'force', + animated: true, + linkDistance: 100, + preventOverlap: true, + }, + data, + }); + + graph.render(); + + window.addPanel((gui) => { + gui.add({ type: 'small' }, 'type', ['small', 'large']).onChange((type) => { + fetchData(type).then((data) => { + graph.setData(data); + graph.render(); + }); + }); + }); +}); diff --git a/packages/site/examples/layout/mechanism/demo/meta.json b/packages/site/examples/layout/mechanism/demo/meta.json new file mode 100644 index 0000000000..f155ac33e7 --- /dev/null +++ b/packages/site/examples/layout/mechanism/demo/meta.json @@ -0,0 +1,24 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "switch.js", + "title": { + "zh": "布局切换", + "en": "Switch Layout" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*aGiCRrsJeCUAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "change-data.js", + "title": { + "zh": "数据动态切换", + "en": "Change Data" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Cq8SRL2NZtYAAAAAAAAAAAAADmJ7AQ/original" + } + ] +} diff --git a/packages/site/examples/layout/mechanism/demo/switch.js b/packages/site/examples/layout/mechanism/demo/switch.js new file mode 100644 index 0000000000..ccafe6ff5a --- /dev/null +++ b/packages/site/examples/layout/mechanism/demo/switch.js @@ -0,0 +1,35 @@ +import { Graph } from '@antv/g6'; + +fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + animation: true, + layout: { + type: 'circular', + }, + behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'], + data, + }); + + graph.render(); + + window.addPanel((gui) => { + gui + .add({ layout: 'circular' }, 'layout', ['circular', 'grid', 'force', 'radial', 'concentric', 'mds']) + .onChange((layout) => { + const options = { + circular: { type: 'circular' }, + grid: { type: 'grid' }, + force: { type: 'force', preventOverlap: true }, + radial: { type: 'radial', preventOverlap: true }, + concentric: { type: 'concentric' }, + mds: { type: 'mds', linkDistance: 100 }, + }; + graph.stopLayout(); + graph.setLayout(options[layout]); + graph.layout(); + }); + }); + }); diff --git a/packages/site/examples/layout/mechanism/index.en.md b/packages/site/examples/layout/mechanism/index.en.md new file mode 100644 index 0000000000..48d54e5ae8 --- /dev/null +++ b/packages/site/examples/layout/mechanism/index.en.md @@ -0,0 +1,4 @@ +--- +title: Layout Mechanism +order: 15 +--- diff --git a/packages/site/examples/layout/mechanism/index.zh.md b/packages/site/examples/layout/mechanism/index.zh.md new file mode 100644 index 0000000000..286b8e3e2c --- /dev/null +++ b/packages/site/examples/layout/mechanism/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 布局机制 +order: 15 +--- diff --git a/packages/site/examples/layout/mindmap/API.en.md b/packages/site/examples/layout/mindmap/API.en.md deleted file mode 100644 index 76fafac5aa..0000000000 --- a/packages/site/examples/layout/mindmap/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/mindmap/API.zh.md b/packages/site/examples/layout/mindmap/API.zh.md deleted file mode 100644 index 380e25baa2..0000000000 --- a/packages/site/examples/layout/mindmap/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/mindmap/demo/hMindmap.ts b/packages/site/examples/layout/mindmap/demo/auto-side.js similarity index 74% rename from packages/site/examples/layout/mindmap/demo/hMindmap.ts rename to packages/site/examples/layout/mindmap/demo/auto-side.js index 2841d103cc..48b125334f 100644 --- a/packages/site/examples/layout/mindmap/demo/hMindmap.ts +++ b/packages/site/examples/layout/mindmap/demo/auto-side.js @@ -1,4 +1,4 @@ -import { Graph, Utils } from '@antv/g6'; +import { Graph, treeToGraphData } from '@antv/g6'; fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) @@ -6,10 +6,10 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j const graph = new Graph({ container: 'container', autoFit: 'view', - data: Utils.treeToGraphData(data), + data: treeToGraphData(data), node: { style: (model) => { - const x = +model.style!.x!; + const x = +model.style.x; return { labelText: model.id, size: 26, @@ -19,21 +19,12 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j lineWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF', - ports: [ - { - placement: 'right', - }, - { - placement: 'left', - }, - ], + ports: [{ placement: 'right' }, { placement: 'left' }], }; }, }, edge: { - style: { - type: 'cubic-horizontal', - }, + type: 'cubic-horizontal', }, layout: { type: 'mindmap', diff --git a/packages/site/examples/layout/mindmap/demo/hCustomSideMindmap.ts b/packages/site/examples/layout/mindmap/demo/custom-side.js similarity index 76% rename from packages/site/examples/layout/mindmap/demo/hCustomSideMindmap.ts rename to packages/site/examples/layout/mindmap/demo/custom-side.js index 29a7b0aad5..aa463d0dde 100644 --- a/packages/site/examples/layout/mindmap/demo/hCustomSideMindmap.ts +++ b/packages/site/examples/layout/mindmap/demo/custom-side.js @@ -1,4 +1,4 @@ -import { Graph, Utils } from '@antv/g6'; +import { Graph, treeToGraphData } from '@antv/g6'; fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) @@ -6,10 +6,10 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j const graph = new Graph({ container: 'container', autoFit: 'view', - data: Utils.treeToGraphData(data), + data: treeToGraphData(data), node: { style: (model) => { - const x = +model.style!.x!; + const x = +model.style.x; return { labelText: model.id, size: 26, @@ -19,21 +19,12 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j lineWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF', - ports: [ - { - placement: 'right', - }, - { - placement: 'left', - }, - ], + ports: [{ placement: 'right' }, { placement: 'left' }], }; }, }, edge: { - style: { - type: 'cubic-horizontal', - }, + type: 'cubic-horizontal', }, layout: { type: 'mindmap', diff --git a/packages/site/examples/layout/mindmap/demo/hLeftMindmap.ts b/packages/site/examples/layout/mindmap/demo/left-side.js similarity index 76% rename from packages/site/examples/layout/mindmap/demo/hLeftMindmap.ts rename to packages/site/examples/layout/mindmap/demo/left-side.js index 667f3b996e..e3c55a726e 100644 --- a/packages/site/examples/layout/mindmap/demo/hLeftMindmap.ts +++ b/packages/site/examples/layout/mindmap/demo/left-side.js @@ -1,4 +1,4 @@ -import { Graph, Utils } from '@antv/g6'; +import { Graph, treeToGraphData } from '@antv/g6'; fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) @@ -6,7 +6,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j const graph = new Graph({ container: 'container', autoFit: 'view', - data: Utils.treeToGraphData(data), + data: treeToGraphData(data), node: { style: (model) => { return { @@ -18,21 +18,12 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j lineWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF', - ports: [ - { - placement: 'right', - }, - { - placement: 'left', - }, - ], + ports: [{ placement: 'right' }, { placement: 'left' }], }; }, }, edge: { - style: { - type: 'cubic-horizontal', - }, + type: 'cubic-horizontal', }, layout: { type: 'mindmap', diff --git a/packages/site/examples/layout/mindmap/demo/meta.json b/packages/site/examples/layout/mindmap/demo/meta.json index b39beb9df1..de9b1073c7 100644 --- a/packages/site/examples/layout/mindmap/demo/meta.json +++ b/packages/site/examples/layout/mindmap/demo/meta.json @@ -5,33 +5,33 @@ }, "demos": [ { - "filename": "hMindmap.ts", + "filename": "auto-side.js", "title": { - "zh": "脑图树-子节点自动两侧分布", - "en": "Two Side Mindmap Layout" + "zh": "子节点自动分布", + "en": "Auto Mindmap Layout" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wRZjTL3fCbEAAAAAAAAAAABkARQnAQ" }, { - "filename": "hRightMindmap.ts", + "filename": "right-side.js", "title": { - "zh": "脑图树-子节点右侧分布", + "zh": "子节点右侧分布", "en": "Right Side Mindmap Layout" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*W6OGRLg2UJcAAAAAAAAAAABkARQnAQ" }, { - "filename": "hLeftMindmap.ts", + "filename": "left-side.js", "title": { - "zh": "脑图树-子节点左侧分布", + "zh": "子节点左侧分布", "en": "Left Side Mindmap Layout" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NNUaTaN9yIgAAAAAAAAAAABkARQnAQ" }, { - "filename": "hCustomSideMindmap.ts", + "filename": "custom-side.js", "title": { - "zh": "脑图树-自定义子节点分布", + "zh": "自定义子节点分布", "en": "Custom Mindmap Layout" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Su39QqQr9PYAAAAAAAAAAABkARQnAQ" diff --git a/packages/site/examples/layout/mindmap/demo/hRightMindmap.ts b/packages/site/examples/layout/mindmap/demo/right-side.js similarity index 76% rename from packages/site/examples/layout/mindmap/demo/hRightMindmap.ts rename to packages/site/examples/layout/mindmap/demo/right-side.js index 5d37992b7f..0aa71b777c 100644 --- a/packages/site/examples/layout/mindmap/demo/hRightMindmap.ts +++ b/packages/site/examples/layout/mindmap/demo/right-side.js @@ -1,4 +1,4 @@ -import { Graph, Utils } from '@antv/g6'; +import { Graph, treeToGraphData } from '@antv/g6'; fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) @@ -6,7 +6,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j const graph = new Graph({ container: 'container', autoFit: 'view', - data: Utils.treeToGraphData(data), + data: treeToGraphData(data), node: { style: (model) => { return { @@ -17,21 +17,12 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j lineWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF', - ports: [ - { - placement: 'right', - }, - { - placement: 'left', - }, - ], + ports: [{ placement: 'right' }, { placement: 'left' }], }; }, }, edge: { - style: { - type: 'cubic-horizontal', - }, + type: 'cubic-horizontal', }, layout: { type: 'mindmap', diff --git a/packages/site/examples/layout/mindmap/index.en.md b/packages/site/examples/layout/mindmap/index.en.md index 6a2035e2a6..57c237df36 100644 --- a/packages/site/examples/layout/mindmap/index.en.md +++ b/packages/site/examples/layout/mindmap/index.en.md @@ -2,11 +2,3 @@ title: Mindmap order: 5 --- - -The nodes with same depth will be placed on the same level. Difference from compactBox, Mindmap will not consider the node size.
mindmap - -## Usage - -Mindmap is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in `layout` while instantiating Graph. - -You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information. diff --git a/packages/site/examples/layout/mindmap/index.zh.md b/packages/site/examples/layout/mindmap/index.zh.md index 964a37556f..c56b187b15 100644 --- a/packages/site/examples/layout/mindmap/index.zh.md +++ b/packages/site/examples/layout/mindmap/index.zh.md @@ -2,23 +2,3 @@ title: Mindmap 脑图树 order: 5 --- - -深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。
mindmap - -## 使用指南 - -脑图树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。 - -该布局有以下配置项，Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。 - -- **direction**: String 类型，树的布局方向。可选值有：'H'：根节点的子节点分成两部分横向放置在根节点左右两侧 ，如代码演示 1 | 'V'：将根节点的所有孩子纵向排列。 - -- **getWidth**: Number | Function 类型，每个节点的宽度。 - -- **getHeight**: Number | Function 类型，每个节点的高度。 - -- **getHGap**: Number | Function 类型，每个节点的水平间隙。 - -- **getVGap**: Number | Function 类型，每个节点的垂直间隙。 - -- **getSide**: Function 类型，节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。如代码演示 2、3、4。 diff --git a/packages/site/examples/layout/radial/demo/basic.js b/packages/site/examples/layout/radial/demo/basic.js new file mode 100644 index 0000000000..76ad9966d9 --- /dev/null +++ b/packages/site/examples/layout/radial/demo/basic.js @@ -0,0 +1,29 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/radial.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + autoFit: 'center', + layout: { + type: 'radial', + unitRadius: 100, + linkDistance: 200, + }, + node: { + style: { + fill: '#EFF4FF', + labelPlacement: 'center', + labelText: (d) => d.id, + lineWidth: 1, + size: 20, + stroke: '#5F95FF', + }, + }, + behaviors: ['drag-canvas', 'drag-element'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/fruchtermanLayout/demo/basicFruchterman.ts b/packages/site/examples/layout/radial/demo/cluster-sort.js similarity index 60% rename from packages/site/examples/layout/fruchtermanLayout/demo/basicFruchterman.ts rename to packages/site/examples/layout/radial/demo/cluster-sort.js index 52e1c825f2..dae2490bb9 100644 --- a/packages/site/examples/layout/fruchtermanLayout/demo/basicFruchterman.ts +++ b/packages/site/examples/layout/radial/demo/cluster-sort.js @@ -2,40 +2,40 @@ import { Graph } from '@antv/g6'; const data = { nodes: [ - { id: '0', data: { cluster: 'a' } }, - { id: '1', data: { cluster: 'a' } }, - { id: '2', data: { cluster: 'a' } }, - { id: '3', data: { cluster: 'a' } }, - { id: '4', data: { cluster: 'a' } }, - { id: '5', data: { cluster: 'a' } }, - { id: '6', data: { cluster: 'a' } }, - { id: '7', data: { cluster: 'a' } }, - { id: '8', data: { cluster: 'a' } }, - { id: '9', data: { cluster: 'a' } }, - { id: '10', data: { cluster: 'a' } }, - { id: '11', data: { cluster: 'a' } }, - { id: '12', data: { cluster: 'a' } }, - { id: '13', data: { cluster: 'b' } }, - { id: '14', data: { cluster: 'b' } }, - { id: '15', data: { cluster: 'b' } }, - { id: '16', data: { cluster: 'b' } }, - { id: '17', data: { cluster: 'b' } }, - { id: '18', data: { cluster: 'c' } }, - { id: '19', data: { cluster: 'c' } }, - { id: '20', data: { cluster: 'c' } }, - { id: '21', data: { cluster: 'c' } }, - { id: '22', data: { cluster: 'c' } }, - { id: '23', data: { cluster: 'c' } }, - { id: '24', data: { cluster: 'c' } }, - { id: '25', data: { cluster: 'c' } }, - { id: '26', data: { cluster: 'c' } }, - { id: '27', data: { cluster: 'c' } }, - { id: '28', data: { cluster: 'c' } }, - { id: '29', data: { cluster: 'c' } }, - { id: '30', data: { cluster: 'c' } }, - { id: '31', data: { cluster: 'd' } }, - { id: '32', data: { cluster: 'd' } }, - { id: '33', data: { cluster: 'd' } }, + { id: '0', data: { type: 'a' } }, + { id: '1', data: { type: 'a' } }, + { id: '2', data: { type: 'a' } }, + { id: '3', data: { type: 'a' } }, + { id: '4', data: { type: 'c' } }, + { id: '5', data: { type: 'a' } }, + { id: '6', data: { type: 'b' } }, + { id: '7', data: { type: 'b' } }, + { id: '8', data: { type: 'c' } }, + { id: '9', data: { type: 'd' } }, + { id: '10', data: { type: 'd' } }, + { id: '11', data: { type: 'b' } }, + { id: '12', data: { type: 'c' } }, + { id: '13', data: { type: 'b' } }, + { id: '14', data: { type: 'd' } }, + { id: '15', data: { type: 'd' } }, + { id: '16', data: { type: 'b' } }, + { id: '17', data: { type: 'c' } }, + { id: '18', data: { type: 'c' } }, + { id: '19', data: { type: 'b' } }, + { id: '20', data: { type: 'b' } }, + { id: '21', data: { type: 'd' } }, + { id: '22', data: { type: 'd' } }, + { id: '23', data: { type: 'd' } }, + { id: '24', data: { type: 'a' } }, + { id: '25', data: { type: 'a' } }, + { id: '26', data: { type: 'b' } }, + { id: '27', data: { type: 'b' } }, + { id: '28', data: { type: 'd' } }, + { id: '29', data: { type: 'c' } }, + { id: '30', data: { type: 'c' } }, + { id: '31', data: { type: 'b' } }, + { id: '32', data: { type: 'b' } }, + { id: '33', data: { type: 'a' } }, ], edges: [ { source: '0', target: '1' }, @@ -105,24 +105,31 @@ const graph = new Graph({ container: 'container', data, layout: { - type: 'fruchterman', - gravity: 5, - speed: 5, - animated: true, - clustering: false, + linkDistance: 10, + maxIteration: 1000, + nodeSize: 30, + preventOverlap: true, + sortBy: 'type', + sortStrength: 50, + type: 'radial', + unitRadius: 70, }, node: { style: { - size: 20, - stroke: '#5B8FF9', - fill: '#C6E5FF', - lineWidth: 1, - labelPlacement: 'center', labelText: (d) => d.id, - labelBackground: false, + labelPlacement: 'center', + size: 20, + }, + palette: { + type: 'group', + field: 'type', + }, + }, + edge: { + style: { + endArrow: true, }, }, - animation: true, behaviors: ['drag-canvas', 'drag-element'], }); diff --git a/packages/site/examples/layout/radial/demo/meta.json b/packages/site/examples/layout/radial/demo/meta.json new file mode 100644 index 0000000000..0e6330d0f3 --- /dev/null +++ b/packages/site/examples/layout/radial/demo/meta.json @@ -0,0 +1,32 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "basic.js", + "title": { + "zh": "基本 Radial 辐射布局", + "en": "Basic Radial Layout" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ec_WQ5hqVsgAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "prevent-overlap.js", + "title": { + "zh": "避免重叠", + "en": "Prevent Overlap" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GAFjRJeAoAsAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "cluster-sort.js", + "title": { + "zh": "排序聚类", + "en": "Cluster Sort" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*gzfTQKBB62IAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/packages/site/examples/layout/radial/demo/prevent-overlap.js b/packages/site/examples/layout/radial/demo/prevent-overlap.js new file mode 100644 index 0000000000..2c806244c4 --- /dev/null +++ b/packages/site/examples/layout/radial/demo/prevent-overlap.js @@ -0,0 +1,36 @@ +import { Graph } from '@antv/g6'; + +fetch('https://assets.antv.antgroup.com/g6/radial.json') + .then((res) => res.json()) + .then((data) => { + const graph = new Graph({ + container: 'container', + data, + autoFit: 'center', + layout: { + type: 'radial', + unitRadius: 100, + linkDistance: 200, + preventOverlap: true, + maxPreventOverlapIteration: 100, + }, + node: { + style: { + fill: '#EFF4FF', + labelPlacement: 'center', + labelText: (d) => d.id, + lineWidth: 1, + size: 20, + stroke: '#5F95FF', + }, + }, + edge: { + style: { + endArrow: true, + }, + }, + behaviors: ['drag-canvas', 'drag-element'], + }); + + graph.render(); + }); diff --git a/packages/site/examples/layout/radial/index.en.md b/packages/site/examples/layout/radial/index.en.md new file mode 100644 index 0000000000..f3a75fd663 --- /dev/null +++ b/packages/site/examples/layout/radial/index.en.md @@ -0,0 +1,4 @@ +--- +title: Radial Layout +order: 7 +--- diff --git a/packages/site/examples/layout/radial/index.zh.md b/packages/site/examples/layout/radial/index.zh.md new file mode 100644 index 0000000000..3a1c019b75 --- /dev/null +++ b/packages/site/examples/layout/radial/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Radial 辐射布局 +order: 7 +--- diff --git a/packages/site/examples/layout/radialLayout/API.en.md b/packages/site/examples/layout/radialLayout/API.en.md deleted file mode 100644 index 5c7b3e8778..0000000000 --- a/packages/site/examples/layout/radialLayout/API.en.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/radialLayout/API.zh.md b/packages/site/examples/layout/radialLayout/API.zh.md deleted file mode 100644 index 53137c02be..0000000000 --- a/packages/site/examples/layout/radialLayout/API.zh.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: API ---- - - diff --git a/packages/site/examples/layout/radialLayout/demo/basic.ts b/packages/site/examples/layout/radialLayout/demo/basic.ts deleted file mode 100644 index f4e2b84d98..0000000000 --- a/packages/site/examples/layout/radialLayout/demo/basic.ts +++ /dev/null @@ -1,406 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'radial', - unitRadius: 50, - }, - node: { - style: { - labelText: (d) => d.id, - labelPlacement: 'center', - size: 20, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - behaviors: ['drag-canvas', 'drag-element'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/radialLayout/demo/configurationTranslate.ts b/packages/site/examples/layout/radialLayout/demo/configurationTranslate.ts deleted file mode 100644 index ef424a32b9..0000000000 --- a/packages/site/examples/layout/radialLayout/demo/configurationTranslate.ts +++ /dev/null @@ -1,492 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const descriptionDiv = document.createElement('div'); -descriptionDiv.innerHTML = 'Radial layout, focusNode = = 0, unitRadius = 50, preventOverlap: false'; -const container = document.getElementById('container') as HTMLDivElement; -container.appendChild(descriptionDiv); -const graph = new Graph({ - container: 'container', - layout: { - type: 'radial', - unitRadius: 50, - }, - data, - node: { - style: { - labelText: (d) => d.id, - labelPlacement: 'center', - size: 20, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - edge: { - style: { - endArrow: { - path: 'M 0,0 L 8,4 L 8,-4 Z', - fill: '#e2e2e2', - }, - }, - }, - behaviors: ['drag-canvas', 'drag-element'], - animation: true, -}); -graph.render(); - -if (typeof window !== 'undefined') { - window.addEventListener('error', () => { - if (time) { - clearInterval(time); - } - }); - window.onresize = () => { - if (!graph || graph.destroyed) return; - if (!container || !container.scrollWidth || !container.scrollHeight) return; - graph.resize(container.scrollWidth, container.scrollHeight - 30); - }; -} - -layoutConfigTranslation(); - -const time = setInterval(function () { - layoutConfigTranslation(); -}, 11500); - -/** - * - * @param layoutConfig - */ -function updateLayout(layoutConfig) { - graph.setLayout((current) => ({ - ...current, - ...layoutConfig, - })); - graph.render(); -} - -/** - * - */ -function layoutConfigTranslation() { - setTimeout(function () { - descriptionDiv.innerHTML = 'Radial layout, focusNode = = 0, unitRadius = 50, preventOverlap: true'; - updateLayout({ - preventOverlap: true, - nodeSize: 20, - }); - }, 1000); - - setTimeout(function () { - descriptionDiv.innerHTML = 'Radial layout, focusNode = = 0, unitRadius = 80, preventOverlap: true'; - updateLayout({ - unitRadius: 80, - }); - }, 2500); - - setTimeout(function () { - descriptionDiv.innerHTML = 'Radial layout, focusNode = = 10, unitRadius = 80, preventOverlap: true'; - updateLayout({ - focusNode: '10', - }); - }, 4000); - - setTimeout(function () { - descriptionDiv.innerHTML = 'Radial layout, focusNode = = 20, unitRadius = 80, preventOverlap: true'; - updateLayout({ - focusNode: '20', - }); - }, 5500); - - setTimeout(function () { - descriptionDiv.innerHTML = 'Radial layout, focusNode = = 0, unitRadius = 50, preventOverlap: false'; - updateLayout({ - focusNode: '0', - preventOverlap: false, - unitRadius: 50, - }); - }, 5500); -} diff --git a/packages/site/examples/layout/radialLayout/demo/meta.json b/packages/site/examples/layout/radialLayout/demo/meta.json deleted file mode 100644 index f27a60d302..0000000000 --- a/packages/site/examples/layout/radialLayout/demo/meta.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "title": { - "zh": "中文分类", - "en": "Category" - }, - "demos": [ - { - "filename": "basic.ts", - "title": { - "zh": "基本 Radial 辐射布局", - "en": "Basic Radial Layout" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ec_WQ5hqVsgAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "preventOverlap.ts", - "title": { - "zh": "防止节点重叠的严格辐射布局", - "en": "Prevent Node Overlappings and Restrict Radial" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GAFjRJeAoAsAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "preventOverlapUnstrict.ts", - "title": { - "zh": "防止节点重叠的非严格辐射布局", - "en": "Prevent Node Overlappings and Unrestrict Radial" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*X8rzTZyWwUcAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "configurationTranslate.ts", - "title": { - "zh": "Radial 布局参数动态变化", - "en": "Update Configurations for Radial" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ikctQb9KECAAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "sort.ts", - "title": { - "zh": "同层节点按照指定字段聚类", - "en": "Order the Level Nodes" - }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*gzfTQKBB62IAAAAAAAAAAABkARQnAQ" - } - ] -} diff --git a/packages/site/examples/layout/radialLayout/demo/preventOverlap.ts b/packages/site/examples/layout/radialLayout/demo/preventOverlap.ts deleted file mode 100644 index 59f8ceb0e1..0000000000 --- a/packages/site/examples/layout/radialLayout/demo/preventOverlap.ts +++ /dev/null @@ -1,416 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'radial', - unitRadius: 50, - preventOverlap: true, - maxPreventOverlapIteration: 100, - }, - node: { - style: { - labelText: (d) => d.id, - labelPlacement: 'center', - size: () => Math.random() * 20 + 10, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - edge: { - style: { - endArrow: { - path: 'M 0,0 L 8,4 L 8,-4 Z', - fill: '#e2e2e2', - }, - }, - }, - behaviors: ['drag-canvas', 'drag-element'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/radialLayout/demo/preventOverlapUnstrict.ts b/packages/site/examples/layout/radialLayout/demo/preventOverlapUnstrict.ts deleted file mode 100644 index 040ec16ff9..0000000000 --- a/packages/site/examples/layout/radialLayout/demo/preventOverlapUnstrict.ts +++ /dev/null @@ -1,416 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const graph = new Graph({ - container: 'container', - data, - layout: { - type: 'radial', - unitRadius: 70, - preventOverlap: true, - strictRadial: false, - }, - node: { - style: { - labelText: (d) => d.id, - labelPlacement: 'center', - size: 20, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - edge: { - style: { - endArrow: { - path: 'M 0,0 L 8,4 L 8,-4 Z', - fill: '#e2e2e2', - }, - }, - }, - behaviors: ['drag-canvas', 'drag-element'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/radialLayout/demo/sort.ts b/packages/site/examples/layout/radialLayout/demo/sort.ts deleted file mode 100644 index f54b3790d1..0000000000 --- a/packages/site/examples/layout/radialLayout/demo/sort.ts +++ /dev/null @@ -1,466 +0,0 @@ -import { Graph } from '@antv/g6'; - -const data = { - nodes: [ - { - id: '0', - sortAttr: 0, - sortAttr2: 'a', - }, - { - id: '1', - sortAttr: 0, - sortAttr2: 'a', - }, - { - id: '2', - sortAttr: 0, - sortAttr2: 'a', - }, - { - id: '3', - sortAttr: 0, - sortAttr2: 'a', - }, - { - id: '4', - sortAttr: 2, - sortAttr2: 'c', - }, - { - id: '5', - sortAttr: 0, - sortAttr2: 'a', - }, - { - id: '6', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '7', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '8', - sortAttr: 2, - sortAttr2: 'c', - }, - { - id: '9', - sortAttr: 3, - sortAttr2: 'd', - }, - { - id: '10', - sortAttr: 3, - sortAttr2: 'd', - }, - { - id: '11', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '12', - sortAttr: 2, - sortAttr2: 'c', - }, - { - id: '13', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '14', - sortAttr: 3, - sortAttr2: 'd', - }, - { - id: '15', - sortAttr: 3, - sortAttr2: 'd', - }, - { - id: '16', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '17', - sortAttr: 2, - sortAttr2: 'c', - }, - { - id: '18', - sortAttr: 2, - sortAttr2: 'c', - }, - { - id: '19', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '20', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '21', - sortAttr: 3, - sortAttr2: 'd', - }, - { - id: '22', - sortAttr: 3, - sortAttr2: 'd', - }, - { - id: '23', - sortAttr: 3, - sortAttr2: 'd', - }, - { - id: '24', - sortAttr: 0, - sortAttr2: 'a', - }, - { - id: '25', - sortAttr: 0, - sortAttr2: 'a', - }, - { - id: '26', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '27', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '28', - sortAttr: 3, - sortAttr2: 'd', - }, - { - id: '29', - sortAttr: 2, - sortAttr2: 'c', - }, - { - id: '30', - sortAttr: 2, - sortAttr2: 'c', - }, - { - id: '31', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '32', - sortAttr: 1, - sortAttr2: 'b', - }, - { - id: '33', - sortAttr: 0, - sortAttr2: 'a', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - -const colors = ['steelblue', 'green', 'pink', 'grey']; -const colorsObj = { a: 'steelblue', b: 'green', c: 'pink', d: 'grey' }; - -const { nodes, edges } = data; -const graph = new Graph({ - container: 'container', - data: { - nodes: nodes.map((item) => ({ - ...item, - lineWidth: 4, - fill: '#fff', - stroke: colors[item.sortAttr2] || colorsObj[item.sortAttr2], - })), - edges, - }, - layout: { - type: 'radial', - unitRadius: 70, - maxIteration: 1000, - linkDistance: 10, - preventOverlap: true, - nodeSize: 30, - sortBy: 'sortAttr2', - sortStrength: 50, - }, - node: { - style: { - labelText: (d) => d.id, - labelPlacement: 'center', - size: 20, - fill: '#EFF4FF', - lineWidth: 1, - stroke: '#5F95FF', - }, - }, - edge: { - style: { - endArrow: { - path: 'M 0,0 L 8,4 L 8,-4 Z', - fill: '#e2e2e2', - }, - }, - }, - behaviors: ['drag-canvas', 'drag-element'], -}); - -graph.render(); diff --git a/packages/site/examples/layout/radialLayout/index.en.md b/packages/site/examples/layout/radialLayout/index.en.md deleted file mode 100644 index ab363dc115..0000000000 --- a/packages/site/examples/layout/radialLayout/index.en.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Radial Layout -order: 7 ---- - -Radial Layout will place the nodes to the concentric circles around the `focusNode` according to the shortest path length to `focusNode`. - -## Usage - -As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/sub-layout). By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the radial radius, preven node overlappings, relaxed radial, and so on. - -- Example 1 : Basic Radial Layout. -- Example 2 : Prevent node overlappings according each node's size. -- Example 3 : Relaxed radial layout allows offsets between nodes on the same level to prevent node overlappings. -- Example 4 : By using the subgraph layout mechanism, we extend nodes by interaction. Try to click node 2. -- Example 5 : Translate the parameters of Radial Layout. -- Example 6 : Cluster the nodes in the same level according to some attribute. diff --git a/packages/site/examples/layout/radialLayout/index.zh.md b/packages/site/examples/layout/radialLayout/index.zh.md deleted file mode 100644 index 7ff5622012..0000000000 --- a/packages/site/examples/layout/radialLayout/index.zh.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Radial 辐射布局 -order: 7 ---- - -Radial 辐射布局根据参数中指定的 focusNode 为中心点，根据其他节点与中心点的拓扑距离（最短路径长度）将其余节点放置在以中心点为圆心的同心圆上。 - -## 使用指南 - -G6 内置的 Radial 布局可在实例化 Graph 时使用该布局。除此之外，还可以如[子图布局](/zh/docs/manual/middle/layout/sub-layout)所示单独使用布局。该布局可以通过配置调整辐射半径、节点不重叠、不严格的辐射布局等。 - -- 代码演示 1 ：基本的 Radial 布局。 -- 代码演示 2 ：根据不同的节点大小计算节点不重叠。 -- 代码演示 3 ：不严格的辐射布局允许同层节点有前后交错以避免节点重叠。 -- 代码演示 4 ：利用子图布局机制可以实现点击节点进行扩展的功能，请尝试点击 2 号节点。 -- 代码演示 5 ：Radial 布局参数动态变化。 -- 代码演示 6 ：同层节点按照指定字段聚类。 diff --git a/packages/site/examples/layout/radialtree/API.en.md b/packages/site/examples/layout/radialtree/API.en.md deleted file mode 100644 index b1de5fcac5..0000000000 --- a/packages/site/examples/layout/radialtree/API.en.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: API ---- - -## Dendrogram - - - -## CompactBox - - diff --git a/packages/site/examples/layout/radialtree/API.zh.md b/packages/site/examples/layout/radialtree/API.zh.md deleted file mode 100644 index 55e69f716a..0000000000 --- a/packages/site/examples/layout/radialtree/API.zh.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: API ---- - -## Dendrogram - - - -## CompactBox - - diff --git a/packages/site/examples/layout/radialtree/demo/meta.json b/packages/site/examples/layout/radialtree/demo/meta.json deleted file mode 100644 index 81d85d7045..0000000000 --- a/packages/site/examples/layout/radialtree/demo/meta.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "title": { - "zh": "中文分类", - "en": "Category" - }, - "demos": [ - { - "filename": "radialTree.js", - "title": { - "zh": "辐射树", - "en": "Radial Layout" - }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2eo2TaGyLZoAAAAAAAAAAAAADmJ7AQ/original" - } - ] -} diff --git a/packages/site/examples/layout/radialtree/demo/radialTree.js b/packages/site/examples/layout/radialtree/demo/radialTree.js deleted file mode 100644 index 34a288af76..0000000000 --- a/packages/site/examples/layout/radialtree/demo/radialTree.js +++ /dev/null @@ -1,128 +0,0 @@ -import { Graph } from '@antv/g6'; - -const layoutConfigs = { - Dendrogram: { - type: 'dendrogram', - direction: 'LR', - nodeSep: 20, - rankSep: 100, - radial: true, - }, - CompactBox: { - type: 'compactBox', - direction: 'RL', - getId: function getId(d) { - return d.id; - }, - getHeight: () => { - return 26; - }, - getWidth: () => { - return 26; - }, - getVGap: () => { - return 20; - }, - getHGap: () => { - return 30; - }, - radial: true, - }, -}; - -const container = document.getElementById('container'); -const width = container.scrollWidth; -const height = container.scrollHeight || 500; - -fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') - .then((res) => res.json()) - .then((data) => { - const graph = new Graph({ - container, - width, - height, - transforms: [ - { - type: 'transform-v4-data', - activeLifecycle: ['read'], - }, - ], - modes: { - default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree'], - }, - node: (model) => { - return { - id: model.id, - data: { - ...model.data, - labelShape: { - position: 'center', - text: model.id, - }, - labelBackgroundShape: {}, - animates: { - update: [ - { - fields: ['x', 'y'], - duration: 500, - shapeId: 'group', - order: 0, - }, - ], - hide: [ - { - fields: ['opacity'], - duration: 200, - shapeId: 'keyShape', - }, - { - fields: ['opacity'], - duration: 200, - shapeId: 'labelShape', - }, - ], - show: [ - { - fields: ['opacity'], - duration: 1000, - shapeId: 'keyShape', - }, - { - fields: ['opacity'], - duration: 1000, - shapeId: 'labelShape', - }, - ], - }, - }, - }; - }, - layout: layoutConfigs.Dendrogram, - autoFit: 'view', - data: { - type: 'treeData', - value: data, - }, - }); - - const btnContainer = document.createElement('div'); - btnContainer.style.position = 'absolute'; - container.appendChild(btnContainer); - const tip = document.createElement('span'); - tip.innerHTML = '👉 Change configs:'; - btnContainer.appendChild(tip); - - Object.keys(layoutConfigs).forEach((name, i) => { - const btn = document.createElement('a'); - btn.innerHTML = name; - btn.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; - btn.style.padding = '4px'; - btn.style.marginLeft = i > 0 ? '24px' : '8px'; - btnContainer.appendChild(btn); - btn.addEventListener('click', () => { - graph.layout(layoutConfigs[name]); - }); - }); - -window.graph = graph; - }); diff --git a/packages/site/examples/layout/radialtree/index.en.md b/packages/site/examples/layout/radialtree/index.en.md deleted file mode 100644 index 4ee0a39f44..0000000000 --- a/packages/site/examples/layout/radialtree/index.en.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Radial Tree -order: 8 ---- - -In radial tree layout, root node will be placed on the center. the branches will be placed in radial around the root. Dendrogram and CompactBox can be transformed into radial tree by configuration.
radialtree - -## Usage - -Radial tree layout is a deformation of Dendrogram and CompactBox. It is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in `layout` while instantiating Graph. - -Same as Dendrogram and CompactBox, only set the `radial` to `true`. We recommend to set `direction` to `LR` or `RL` while using radial tree layout. diff --git a/packages/site/examples/layout/radialtree/index.zh.md b/packages/site/examples/layout/radialtree/index.zh.md deleted file mode 100644 index ab63593345..0000000000 --- a/packages/site/examples/layout/radialtree/index.zh.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 辐射树 -order: 8 ---- - -生态树、紧凑树两种布局方法可以通过配置项变换为辐射型树布局。跟节点位于辐射树中心，其他分支辐射式展开。
radialtree - -## 使用指南 - -辐射树是通过生态树、紧凑树布局的变形。适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。 - -使用方式与对应的生态树、紧凑树相同，配置 `radial` 为 `true` 时，将会以辐射形式展示树。在使用辐射树时建议将布局的 `direction` 配置为 `LR` 或 `RL`。