Cluster Sort

Loading example…

Source

import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { 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' },
    { 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',
  autoFit: 'center',
  data,
  layout: {
    type: 'radial',
    nodeSize: 32,
    unitRadius: 90,
    linkDistance: 200,
    preventOverlap: true,
    sortBy: 'type',
    sortStrength: 50,
  },
  node: {
    style: {
      labelFill: '#fff',
      labelPlacement: 'center',
      labelText: (d) => d.id,
    },
    palette: {
      type: 'group',
      field: 'type',
    },
  },
  edge: {
    style: {
      endArrow: true,
    },
  },
  behaviors: ['drag-canvas', 'drag-element'],
});

graph.render();

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}