test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-29 18:28:19 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: circular layout demp (#5528)

Browse Source
This commit is contained in:
Joel Alan 2024-03-13 20:14:54 +08:00 committed by GitHub
parent d90d916454
commit 095f7fc8b3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 24712 additions and 1072 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

382
packages/g6/__tests__/dataset/circular.json Normal file
View File

@ -0,0 +1,382 @@
{
"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"
}
]
}

5
packages/g6/__tests__/demo/case/index.ts
View File

@ -10,6 +10,11 @@ export * from './element-position';
export * from './element-state';
export * from './element-visibility';
export * from './graph-event';
export * from './layout-circular-basic';
export * from './layout-circular-configuration-translate';
export * from './layout-circular-degree';
export * from './layout-circular-division';
export * from './layout-circular-spiral';
export * from './layout-grid';
export * from './layout-mds';
export * from './plugin-grid-line';

27
packages/g6/__tests__/demo/case/layout-circular-basic.ts Normal file
View File

@ -0,0 +1,27 @@
import { Graph } from '@/src';
import data from '@@/dataset/circular.json';
import type { STDTestCase } from '../types';
export const layoutCircularBasic: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
layout: {
type: 'circular',
},
node: {
style: {
size: 20,
fill: '#EFF4FF',
lineWidth: 1,
stroke: '#5F95FF',
},
},
behaviors: ['zoom-canvas', 'drag-canvas'],
autoFit: 'view',
});
await graph.render();
return graph;
};

35
packages/g6/__tests__/demo/case/layout-circular-configuration-translate.ts Normal file
View File

@ -0,0 +1,35 @@
import { Graph } from '@/src';
import data from '@@/dataset/circular.json';
import type { STDTestCase } from '../types';
export const layoutCircularConfigurationTranslate: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
layout: {
type: 'circular',
},
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-node'],
autoFit: 'view',
});
await graph.render();
return graph;
};

29
packages/g6/__tests__/demo/case/layout-circular-degree.ts Normal file
View File

@ -0,0 +1,29 @@
import { Graph } from '@/src';
import data from '@@/dataset/circular.json';
import type { STDTestCase } from '../types';
export const layoutCircularDegree: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
layout: {
type: 'circular',
ordering: 'degree',
},
node: {
style: {
size: 20,
labelText: (d: { id: string }) => d.id,
fill: '#EFF4FF',
lineWidth: 1,
stroke: '#5F95FF',
},
},
behaviors: ['zoom-canvas', 'drag-canvas'],
autoFit: 'view',
});
await graph.render();
return graph;
};

39
packages/g6/__tests__/demo/case/layout-circular-division.ts Normal file
View File

@ -0,0 +1,39 @@
import { Graph } from '@/src';
import data from '@@/dataset/circular.json';
import type { STDTestCase } from '../types';
export const layoutCircularDivision: STDTestCase = async (context) => {
const graph = new Graph({
...context,
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-node'],
autoFit: 'view',
});
await graph.render();
return graph;
};

38
packages/g6/__tests__/demo/case/layout-circular-spiral.ts Normal file
View File

@ -0,0 +1,38 @@
import { Graph } from '@/src';
import data from '@@/dataset/circular.json';
import type { STDTestCase } from '../types';
export const layoutCircularSpiral: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
layout: {
type: 'circular',
startRadius: 10,
endRadius: 300,
},
node: {
style: {
size: 20,
labelText: (d: { id: string }) => 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-node'],
autoFit: 'view',
});
await graph.render();
return graph;
};

2438
packages/g6/__tests__/snapshots/layouts/layout-circular-basic/layout-circular-basic.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

3902
packages/g6/__tests__/snapshots/layouts/layout-circular-configuration-translate/layout-circular-configuration-translate-division.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

3878
packages/g6/__tests__/snapshots/layouts/layout-circular-configuration-translate/layout-circular-configuration-translate.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

3364
packages/g6/__tests__/snapshots/layouts/layout-circular-degree/layout-circular-degree.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

3894
packages/g6/__tests__/snapshots/layouts/layout-circular-division/layout-circular-division.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

4820
packages/g6/__tests__/snapshots/layouts/layout-circular-spiral/layout-circular-spiral.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

19
packages/g6/__tests__/unit/layouts/layout-circular-basic.spec.ts Normal file
View File

@ -0,0 +1,19 @@
import type { Graph } from '@/src';
import { layoutCircularBasic } from '@@/demo/case';
import { createDemoGraph } from '@@/utils';
describe('layout circular basic', () => {
let graph: Graph;
beforeAll(async () => {
graph = await createDemoGraph(layoutCircularBasic);
});
afterAll(() => {
graph.destroy();
});
it('render', async () => {
await expect(graph).toMatchSnapshot(__filename, 'layout-circular-basic');
});
});

33
packages/g6/__tests__/unit/layouts/layout-circular-configuration-translate.spec.ts Normal file
View File

@ -0,0 +1,33 @@
import type { Graph } from '@/src';
import { layoutCircularConfigurationTranslate } from '@@/demo/case';
import { createDemoGraph } from '@@/utils';
describe('layout circular configuration translate', () => {
let graph: Graph;
beforeAll(async () => {
graph = await createDemoGraph(layoutCircularConfigurationTranslate);
});
afterAll(() => {
graph.destroy();
});
it('render', async () => {
await expect(graph).toMatchSnapshot(__filename, 'layout-circular-configuration-translate');
});
it('change layout', async () => {
graph.setLayout({
type: 'circular',
radius: 200,
startAngle: Math.PI / 4,
endAngle: Math.PI,
divisions: 5,
ordering: 'degree',
}),
await graph.layout();
await expect(graph).toMatchSnapshot(__filename, 'layout-circular-configuration-translate-division');
});
});

19
packages/g6/__tests__/unit/layouts/layout-circular-degree.spec.ts Normal file
View File

@ -0,0 +1,19 @@
import type { Graph } from '@/src';
import { layoutCircularDegree } from '@@/demo/case';
import { createDemoGraph } from '@@/utils';
describe('layout circular degree', () => {
let graph: Graph;
beforeAll(async () => {
graph = await createDemoGraph(layoutCircularDegree);
});
afterAll(() => {
graph.destroy();
});
it('render', async () => {
await expect(graph).toMatchSnapshot(__filename, 'layout-circular-degree');
});
});

19
packages/g6/__tests__/unit/layouts/layout-circular-division.spec.ts Normal file
View File

@ -0,0 +1,19 @@
import type { Graph } from '@/src';
import { layoutCircularDivision } from '@@/demo/case';
import { createDemoGraph } from '@@/utils';
describe('layout circular division', () => {
let graph: Graph;
beforeAll(async () => {
graph = await createDemoGraph(layoutCircularDivision);
});
afterAll(() => {
graph.destroy();
});
it('render', async () => {
await expect(graph).toMatchSnapshot(__filename, 'layout-circular-division');
});
});

19
packages/g6/__tests__/unit/layouts/layout-circular-spiral.spec.ts Normal file
View File

@ -0,0 +1,19 @@
import type { Graph } from '@/src';
import { layoutCircularSpiral } from '@@/demo/case';
import { createDemoGraph } from '@@/utils';
describe('layout circular spiral', () => {
let graph: Graph;
beforeAll(async () => {
graph = await createDemoGraph(layoutCircularSpiral);
});
afterAll(() => {
graph.destroy();
});
it('render', async () => {
await expect(graph).toMatchSnapshot(__filename, 'layout-circular-spiral');
});
});

403
packages/site/examples/net/circular/demo/basic.ts Normal file
View File

@ -0,0 +1,403 @@
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-node'],
});
graph.render();

735
packages/site/examples/net/circular/demo/circular.js
View File

@ -1,735 +0,0 @@
import { Graph, Extensions, extend } from '@antv/g6';
const ExtGraph = extend(Graph, {
behaviors: {
'brush-select': Extensions.BrushSelect,
},
});
const data = {
nodes: [
{
id: '0',
data: {
labelShape: {
text: '0',
},
},
},
{
id: '1',
data: {
labelShape: {
text: '1',
},
},
},
{
id: '2',
data: {
labelShape: {
text: '2',
},
},
},
{
id: '3',
data: {
labelShape: {
text: '3',
},
},
},
{
id: '4',
data: {
labelShape: {
text: '4',
},
},
},
{
id: '5',
data: {
labelShape: {
text: '5',
},
},
},
{
id: '6',
data: {
labelShape: {
text: '6',
},
},
},
{
id: '7',
data: {
labelShape: {
text: '7',
},
},
},
{
id: '8',
data: {
labelShape: {
text: '8',
},
},
},
{
id: '9',
data: {
labelShape: {
text: '9',
},
},
},
{
id: '10',
data: {
labelShape: {
text: '10',
},
},
},
{
id: '11',
data: {
labelShape: {
text: '11',
},
},
},
{
id: '12',
data: {
labelShape: {
text: '12',
},
},
},
{
id: '13',
data: {
labelShape: {
text: '13',
},
},
},
{
id: '14',
data: {
labelShape: {
text: '14',
},
},
},
{
id: '15',
data: {
labelShape: {
text: '15',
},
},
},
{
id: '16',
data: {
labelShape: {
text: '16',
},
},
},
{
id: '17',
data: {
labelShape: {
text: '17',
},
},
},
{
id: '18',
data: {
labelShape: {
text: '18',
},
},
},
{
id: '19',
data: {
labelShape: {
text: '19',
},
},
},
{
id: '20',
data: {
labelShape: {
text: '20',
},
},
},
{
id: '21',
data: {
labelShape: {
text: '21',
},
},
},
{
id: '22',
data: {
labelShape: {
text: '22',
},
},
},
{
id: '23',
data: {
labelShape: {
text: '23',
},
},
},
{
id: '24',
data: {
labelShape: {
text: '24',
},
},
},
{
id: '25',
data: {
labelShape: {
text: '25',
},
},
},
{
id: '26',
data: {
labelShape: {
text: '26',
},
},
},
{
id: '27',
data: {
labelShape: {
text: '27',
},
},
},
{
id: '28',
data: {
labelShape: {
text: '28',
},
},
},
{
id: '29',
data: {
labelShape: {
text: '29',
},
},
},
{
id: '30',
data: {
labelShape: {
text: '30',
},
},
},
{
id: '31',
data: {
labelShape: {
text: '31',
},
},
},
{
id: '32',
data: {
labelShape: {
text: '32',
},
},
},
{
id: '33',
data: {
labelShape: {
text: '33',
},
},
},
],
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 container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new ExtGraph({
container: 'container',
width,
height,
modes: {
default: ['drag-canvas', 'drag-node', 'click-select', 'brush-select'],
},
layout: {
type: 'circular',
},
node: (model) => {
return {
id: model.id,
data: {
...model.data,
labelBackgroundShape: {},
animates: {
update: [
{
fields: ['x', 'y'],
duration: 500,
},
{
fields: ['opacity'],
shapeId: 'haloShape',
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
},
],
},
},
};
},
edge: {
keyShape: {
endArrow: {
type: 'vee',
},
},
},
data,
});
window.graph = graph;
const configs = {
Default: {
type: 'circular',
radius: undefined,
divisions: undefined,
startAngle: undefined,
endAngle: undefined,
startRadius: undefined,
endRadius: undefined,
ordering: undefined,
},
'Order by degree': { type: 'circular', ordering: 'degree' },
Division: { type: 'circular', divisions: 5, radius: 200, startAngle: Math.PI / 4, endAngle: Math.PI },
Spiral: {
type: 'circular',
startRadius: 10,
endRadius: 300,
},
};
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(configs).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(configs[name]);
});
});

416
packages/site/examples/net/circular/demo/circularConfigurationTranslate.js → packages/site/examples/net/circular/demo/configurationTranslate.ts
View File

@ -4,700 +4,454 @@ const data = {
nodes: [
{
id: '0',
data: {
labelShape: {
text: '0',
},
},
label: '0',
},
{
id: '1',
data: {
labelShape: {
text: '1',
},
},
label: '1',
},
{
id: '2',
data: {
labelShape: {
text: '2',
},
},
label: '2',
},
{
id: '3',
data: {
labelShape: {
text: '3',
},
},
label: '3',
},
{
id: '4',
data: {
labelShape: {
text: '4',
},
},
label: '4',
},
{
id: '5',
data: {
labelShape: {
text: '5',
},
},
label: '5',
},
{
id: '6',
data: {
labelShape: {
text: '6',
},
},
label: '6',
},
{
id: '7',
data: {
labelShape: {
text: '7',
},
},
label: '7',
},
{
id: '8',
data: {
labelShape: {
text: '8',
},
},
label: '8',
},
{
id: '9',
data: {
labelShape: {
text: '9',
},
},
label: '9',
},
{
id: '10',
data: {
labelShape: {
text: '10',
},
},
label: '10',
},
{
id: '11',
data: {
labelShape: {
text: '11',
},
},
label: '11',
},
{
id: '12',
data: {
labelShape: {
text: '12',
},
},
label: '12',
},
{
id: '13',
data: {
labelShape: {
text: '13',
},
},
label: '13',
},
{
id: '14',
data: {
labelShape: {
text: '14',
},
},
label: '14',
},
{
id: '15',
data: {
labelShape: {
text: '15',
},
},
label: '15',
},
{
id: '16',
data: {
labelShape: {
text: '16',
},
},
label: '16',
},
{
id: '17',
data: {
labelShape: {
text: '17',
},
},
label: '17',
},
{
id: '18',
data: {
labelShape: {
text: '18',
},
},
label: '18',
},
{
id: '19',
data: {
labelShape: {
text: '19',
},
},
label: '19',
},
{
id: '20',
data: {
labelShape: {
text: '20',
},
},
label: '20',
},
{
id: '21',
data: {
labelShape: {
text: '21',
},
},
label: '21',
},
{
id: '22',
data: {
labelShape: {
text: '22',
},
},
label: '22',
},
{
id: '23',
data: {
labelShape: {
text: '23',
},
},
label: '23',
},
{
id: '24',
data: {
labelShape: {
text: '24',
},
},
label: '24',
},
{
id: '25',
data: {
labelShape: {
text: '25',
},
},
label: '25',
},
{
id: '26',
data: {
labelShape: {
text: '26',
},
},
label: '26',
},
{
id: '27',
data: {
labelShape: {
text: '27',
},
},
label: '27',
},
{
id: '28',
data: {
labelShape: {
text: '28',
},
},
label: '28',
},
{
id: '29',
data: {
labelShape: {
text: '29',
},
},
label: '29',
},
{
id: '30',
data: {
labelShape: {
text: '30',
},
},
label: '30',
},
{
id: '31',
data: {
labelShape: {
text: '31',
},
},
label: '31',
},
{
id: '32',
data: {
labelShape: {
text: '32',
},
},
label: '32',
},
{
id: '33',
data: {
labelShape: {
text: '33',
},
},
label: '33',
},
],
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 descriptionDiv = document.createElement('div');
descriptionDiv.innerHTML = 'Circular layout with radius: take full use of the canvas, ordering: topology';
const container = document.getElementById('container');
const container = document.getElementById('container') as HTMLDivElement;
container.appendChild(descriptionDiv);
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new Graph({
container: 'container',
width,
height,
modes: {
default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
},
autoFit: {
type: 'center',
},
layout: {
type: 'circular',
},
node: (model) => {
return {
id: model.id,
data: {
...model.data,
labelBackgroundShape: {},
animates: {
update: [
{
fields: ['x', 'y'],
duration: 500,
},
],
},
},
};
data,
node: {
style: {
size: 20,
fill: '#EFF4FF',
lineWidth: 1,
stroke: '#5F95FF',
},
},
edge: {
keyShape: {
style: {
endArrow: {
type: 'vee',
path: 'M 0,0 L 8,4 L 8,-4 Z',
fill: '#e2e2e2',
},
},
},
data,
behaviors: ['drag-canvas', 'drag-node'],
animation: true,
});
graph.render();
window.graph = graph;
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();
setInterval(function () {
const time = setInterval(function () {
layoutConfigTranslation();
}, 11500);
/**
*
* @param layoutConfig
*/
function updateLayout(layoutConfig) {
graph.setLayout({
type: 'circular',
...layoutConfig,
});
graph.render();
}
/**
*
*/
function layoutConfigTranslation() {
setTimeout(function () {
descriptionDiv.innerHTML = 'Circular layout, radius = 200, divisions = 5, ordering: degree';
graph.layout({
updateLayout({
radius: 200,
startAngle: Math.PI / 4,
endAngle: Math.PI,
@ -708,7 +462,7 @@ function layoutConfigTranslation() {
setTimeout(function () {
descriptionDiv.innerHTML = 'Circular layout, radius = 200, divisions = 3, ordering: degree';
graph.layout({
updateLayout({
startAngle: Math.PI / 4,
endAngle: Math.PI,
divisions: 3,
@ -717,7 +471,7 @@ function layoutConfigTranslation() {
setTimeout(function () {
descriptionDiv.innerHTML = 'Circular layout, radius = 200, divisions = 8, ordering: degree';
graph.layout({
updateLayout({
radius: 200,
startAngle: 0,
endAngle: Math.PI / 2,
@ -728,7 +482,7 @@ function layoutConfigTranslation() {
setTimeout(function () {
descriptionDiv.innerHTML =
'Circular layout, radius = 10～300(spiral), endAngle: PI, divisions = 1, ordering: degree';
graph.layout({
updateLayout({
radius: null,
startRadius: 10,
endRadius: 300,
@ -741,21 +495,21 @@ function layoutConfigTranslation() {
setTimeout(function () {
descriptionDiv.innerHTML =
'Circular layout, radius = 10～300(spiral),endAngle: 2 * PI, divisions= 1, ordering: degree';
graph.layout({
updateLayout({
endAngle: 2 * Math.PI,
});
}, 7000);
setTimeout(function () {
descriptionDiv.innerHTML = 'Circular layout, radius = 200, ordering: degree';
graph.layout({
updateLayout({
radius: 200,
});
}, 8500);
setTimeout(function () {
descriptionDiv.innerHTML = 'Circular layout, radius = 200, ordering: topology';
graph.layout({
updateLayout({
radius: 200,
ordering: 'topology',
});

405
packages/site/examples/net/circular/demo/degree.ts Normal file
View File

@ -0,0 +1,405 @@
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: { id: string }) => d.id,
fill: '#EFF4FF',
lineWidth: 1,
stroke: '#5F95FF',
},
},
behaviors: ['drag-canvas', 'drag-node'],
});
graph.render();

415
packages/site/examples/net/circular/demo/division.ts Normal file
View File

@ -0,0 +1,415 @@
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-node'],
});
graph.render();

36
packages/site/examples/net/circular/demo/meta.json
View File

@ -5,20 +5,44 @@
},
"demos": [
{
"filename": "circular.js",
"filename": "basic.ts",
"title": {
"zh": "Circular 布局",
"en": "Circular Layout"
"zh": "基本 Circular 布局",
"en": "Basic Circular Layout"
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1PpVQLFTaQwAAAAAAAAAAAAADmJ7AQ/original"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZSuXQ4PS2F8AAAAAAAAAAABkARQnAQ"
},
{
"filename": "circularConfigurationTranslate.js",
"filename": "degree.ts",
"title": {
"zh": "按照节点度数排序的 Circular 布局",
"en": "Degree Ordered Circular"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MOEeS6ooB7AAAAAAAAAAAABkARQnAQ"
},
{
"filename": "spiral.ts",
"title": {
"zh": "螺旋线布局",
"en": "Spiral Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*bY0iSqTc3z4AAAAAAAAAAABkARQnAQ"
},
{
"filename": "division.ts",
"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://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*H6DyT6468ZMAAAAAAAAAAAAADmJ7AQ/original"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*D85cS7-yqNEAAAAAAAAAAABkARQnAQ"
}
]
}

414
packages/site/examples/net/circular/demo/spiral.ts Normal file
View File

@ -0,0 +1,414 @@
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: { id: string }) => 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-node'],
});
graph.render();