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

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]);
  };