mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 10:01:09 +08:00
627 lines
8.8 KiB
JavaScript
627 lines
8.8 KiB
JavaScript
import G6 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 G6.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);
|
|
});
|
|
|
|
if (typeof window !== 'undefined')
|
|
window.onresize = () => {
|
|
if (!graph || graph.destroyed) return;
|
|
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
|
graph.setSize([container.scrollWidth, container.scrollHeight]);
|
|
};
|