g6/packages/site/examples/net/layoutMechanism/demo/subgraphLayout.js

627 lines
9.9 KiB
JavaScript
Raw Normal View History

2023-08-29 21:58:37 +08:00
import { Graph, Extensions } from '@antv/g6';
import { Graph as GraphCore } from '@antv/graphlib';
2023-02-02 10:31:36 +08:00
const data = {
nodes: [
{
id: '0',
2023-08-28 20:39:59 +08:00
data: {
label: '0',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '1',
2023-08-28 20:39:59 +08:00
data: {
label: '1',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '2',
2023-08-28 20:39:59 +08:00
data: {
label: '2',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '3',
2023-08-28 20:39:59 +08:00
data: {
label: '3',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '4',
2023-08-28 20:39:59 +08:00
data: {
label: '4',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '5',
2023-08-28 20:39:59 +08:00
data: {
label: '5',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '6',
2023-08-28 20:39:59 +08:00
data: {
label: '6',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '7',
2023-08-28 20:39:59 +08:00
data: {
label: '7',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '8',
2023-08-28 20:39:59 +08:00
data: {
label: '8',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '9',
2023-08-28 20:39:59 +08:00
data: {
label: '9',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '10',
2023-08-28 20:39:59 +08:00
data: {
label: '10',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '11',
2023-08-28 20:39:59 +08:00
data: {
label: '11',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '12',
2023-08-28 20:39:59 +08:00
data: {
label: '12',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '13',
2023-08-28 20:39:59 +08:00
data: {
label: '13',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '14',
2023-08-28 20:39:59 +08:00
data: {
label: '14',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '15',
2023-08-28 20:39:59 +08:00
data: {
label: '15',
subGraph: '1',
},
2023-02-02 10:31:36 +08:00
},
{
id: '16',
2023-08-28 20:39:59 +08:00
data: {
label: '16',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '17',
2023-08-28 20:39:59 +08:00
data: {
label: '17',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '18',
2023-08-28 20:39:59 +08:00
data: {
label: '18',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '19',
2023-08-28 20:39:59 +08:00
data: {
label: '19',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '20',
2023-08-28 20:39:59 +08:00
data: {
label: '20',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '21',
2023-08-28 20:39:59 +08:00
data: {
label: '21',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '22',
2023-08-28 20:39:59 +08:00
data: {
label: '22',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '23',
2023-08-28 20:39:59 +08:00
data: {
label: '23',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '24',
2023-08-28 20:39:59 +08:00
data: {
label: '24',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '25',
2023-08-28 20:39:59 +08:00
data: {
label: '25',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '26',
2023-08-28 20:39:59 +08:00
data: {
label: '26',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '27',
2023-08-28 20:39:59 +08:00
data: {
label: '27',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '28',
2023-08-28 20:39:59 +08:00
data: {
label: '28',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '29',
2023-08-28 20:39:59 +08:00
data: {
label: '29',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '30',
2023-08-28 20:39:59 +08:00
data: {
label: '30',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '31',
2023-08-28 20:39:59 +08:00
data: {
label: '31',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '32',
2023-08-28 20:39:59 +08:00
data: {
label: '32',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
{
id: '33',
2023-08-28 20:39:59 +08:00
data: {
label: '33',
subGraph: '0',
},
2023-02-02 10:31:36 +08:00
},
],
edges: [
{
2023-08-28 20:39:59 +08:00
id: 'edge-179',
2023-02-02 10:31:36 +08:00
source: '0',
target: '1',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-811',
2023-02-02 10:31:36 +08:00
source: '0',
target: '2',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-168',
2023-02-02 10:31:36 +08:00
source: '0',
target: '3',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-430',
2023-02-02 10:31:36 +08:00
source: '0',
target: '4',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-492',
2023-02-02 10:31:36 +08:00
source: '0',
target: '5',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-261',
2023-02-02 10:31:36 +08:00
source: '0',
target: '7',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-794',
2023-02-02 10:31:36 +08:00
source: '0',
target: '8',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-898',
2023-02-02 10:31:36 +08:00
source: '0',
target: '9',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-719',
2023-02-02 10:31:36 +08:00
source: '0',
target: '10',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-114',
2023-02-02 10:31:36 +08:00
source: '0',
target: '11',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-514',
2023-02-02 10:31:36 +08:00
source: '0',
target: '13',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-248',
2023-02-02 10:31:36 +08:00
source: '0',
target: '14',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-913',
2023-02-02 10:31:36 +08:00
source: '0',
target: '15',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-472',
2023-02-02 10:31:36 +08:00
source: '0',
target: '16',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-986',
2023-02-02 10:31:36 +08:00
source: '2',
target: '3',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-356',
2023-02-02 10:31:36 +08:00
source: '4',
target: '5',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-776',
2023-02-02 10:31:36 +08:00
source: '4',
target: '6',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-650',
2023-02-02 10:31:36 +08:00
source: '5',
target: '6',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-949',
2023-02-02 10:31:36 +08:00
source: '7',
target: '13',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-531',
2023-02-02 10:31:36 +08:00
source: '8',
target: '14',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-869',
2023-02-02 10:31:36 +08:00
source: '9',
target: '10',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-777',
2023-02-02 10:31:36 +08:00
source: '10',
target: '22',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-339',
2023-02-02 10:31:36 +08:00
source: '10',
target: '14',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-122',
2023-02-02 10:31:36 +08:00
source: '10',
target: '12',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-691',
2023-02-02 10:31:36 +08:00
source: '10',
target: '24',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-484',
2023-02-02 10:31:36 +08:00
source: '10',
target: '21',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-300',
2023-02-02 10:31:36 +08:00
source: '10',
target: '20',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-493',
2023-02-02 10:31:36 +08:00
source: '11',
target: '24',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-626',
2023-02-02 10:31:36 +08:00
source: '11',
target: '22',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-134',
2023-02-02 10:31:36 +08:00
source: '11',
target: '14',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-316',
2023-02-02 10:31:36 +08:00
source: '12',
target: '13',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-212',
2023-02-02 10:31:36 +08:00
source: '16',
target: '17',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-195',
2023-02-02 10:31:36 +08:00
source: '16',
target: '18',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-639',
2023-02-02 10:31:36 +08:00
source: '16',
target: '21',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-742',
2023-02-02 10:31:36 +08:00
source: '16',
target: '22',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-113',
2023-02-02 10:31:36 +08:00
source: '17',
target: '18',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-538',
2023-02-02 10:31:36 +08:00
source: '17',
target: '20',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-301',
2023-02-02 10:31:36 +08:00
source: '18',
target: '19',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-449',
2023-02-02 10:31:36 +08:00
source: '19',
target: '20',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-541',
2023-02-02 10:31:36 +08:00
source: '19',
target: '33',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-138',
2023-02-02 10:31:36 +08:00
source: '19',
target: '22',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-841',
2023-02-02 10:31:36 +08:00
source: '19',
target: '23',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-881',
2023-02-02 10:31:36 +08:00
source: '20',
target: '21',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-854',
2023-02-02 10:31:36 +08:00
source: '21',
target: '22',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-255',
2023-02-02 10:31:36 +08:00
source: '22',
target: '24',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-945',
2023-02-02 10:31:36 +08:00
source: '22',
target: '25',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-119',
2023-02-02 10:31:36 +08:00
source: '22',
target: '26',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-700',
2023-02-02 10:31:36 +08:00
source: '22',
target: '23',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-327',
2023-02-02 10:31:36 +08:00
source: '22',
target: '28',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-685',
2023-02-02 10:31:36 +08:00
source: '22',
target: '30',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-359',
2023-02-02 10:31:36 +08:00
source: '22',
target: '31',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-930',
2023-02-02 10:31:36 +08:00
source: '22',
target: '32',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-998',
2023-02-02 10:31:36 +08:00
source: '22',
target: '33',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-796',
2023-02-02 10:31:36 +08:00
source: '23',
target: '28',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-518',
2023-02-02 10:31:36 +08:00
source: '23',
target: '27',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-778',
2023-02-02 10:31:36 +08:00
source: '23',
target: '29',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-851',
2023-02-02 10:31:36 +08:00
source: '23',
target: '30',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-483',
2023-02-02 10:31:36 +08:00
source: '23',
target: '31',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-335',
2023-02-02 10:31:36 +08:00
source: '23',
target: '33',
},
{
2023-08-28 20:39:59 +08:00
id: 'edge-689',
2023-02-02 10:31:36 +08:00
source: '32',
target: '33',
},
],
};
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
2023-08-29 21:58:37 +08:00
const graph = new Graph({
2023-02-02 10:31:36 +08:00
container: 'container',
width,
height,
2023-08-28 20:39:59 +08:00
autoFit: 'view',
2023-02-02 10:31:36 +08:00
modes: {
2023-08-28 20:39:59 +08:00
default: ['drag-node', 'zoom-canvas', 'drag-canvas', 'click-select'],
2023-02-02 10:31:36 +08:00
},
2023-08-28 20:39:59 +08:00
theme: {
type: 'spec',
specification: {
node: {
dataTypeField: 'cluster',
},
2023-02-02 10:31:36 +08:00
},
},
2023-08-28 20:39:59 +08:00
node: {
labelBackgroundShape: {},
2023-02-02 10:31:36 +08:00
},
2023-08-28 20:39:59 +08:00
data,
2023-02-02 10:31:36 +08:00
});
window.graph = graph;
2023-02-02 10:31:36 +08:00
2023-08-28 20:39:59 +08:00
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);
2023-08-28 20:39:59 +08:00
btn.addEventListener('click', async () => {
2023-08-29 21:58:37 +08:00
const subGridLayout = new Extensions.GridLayout({
2023-08-28 20:39:59 +08:00
begin: [width / 5, height / 5],
2023-02-02 10:31:36 +08:00
});
2023-08-28 20:39:59 +08:00
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);
2023-02-02 10:31:36 +08:00
2023-08-29 21:58:37 +08:00
const subForceLayout = new Extensions.ForceLayout({
2023-08-28 20:39:59 +08:00
center: [(width / 3) * 2, (height / 3) * 2],
linkDistance: 100,
maxSpeed: 100,
2023-02-02 10:31:36 +08:00
preventOverlap: true,
2023-08-28 20:39:59 +08:00
nodeSize: 32,
onTick: function tick(positions) {
2023-02-02 10:31:36 +08:00
// the tick function to show the animation of layout process
2023-08-28 20:39:59 +08:00
graph.updateNodePosition(positions.nodes);
2023-02-02 10:31:36 +08:00
},
});
2023-08-28 20:39:59 +08:00
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));
});