graphgl/react

Layout

Built-In Layout

• fruchterman-gpu

| 参数 | 描述 | 默认值 | | ---------------- | ------------ | ------ | | maxIteration | 最大迭代次数 | 100 | | gravity | 重力 | 10 | | speed | 速度 | 0.1 | | textureWidth | 点纹理宽度 | 16 | | edgeTextureWidth | 边纹理宽度 | 20 |

• force-gpu

| 参数 | 描述 | 默认值 | | ---------------- | ---------------------------------------- | ------ | | maxIteration | 最大迭代次数 | 100 | | damping | 阻尼系数 | 0.9 | | maxSpeed | 最大速度 | 1000 | | minMovement | 一次迭代的平均移动距离小于该值时停止迭代 | 0.5 | | factor | 斥力系数 | 1 | | coulombDisScale | 库伦系数 | 0.005 | | edgeDistance | 理想边长 | 10 | | gravity | 中心重力 | 10 | | edgeStrength | 弹簧引力系数 | 200 | | nodeStrength | 点作用力 | 100 | | textureWidth | 点纹理宽度 | 16 | | edgeTextureWidth | 边纹理宽度 | 20 |

• rotate

| 参数 | 描述 | 默认值 | | ---- | -------- | ------ | | rad | 旋转弧度 | 0 |

AntV Layout

• Source: https://github.com/antvis/layout/blob/v5/packages/layout/README.md
• Demo https://observablehq.com/d/2db6b0cc5e97d8d6

How To Use

import GraphGL, { register } from '@graphgl/react';
import AntVLayout, { AntVLayoutOptions } from '@graphgl/react/layouts/adapter/antv';

AntVLayout.layouts.forEach((type) => {
  AntVLayout.workerScirptURL = [
    'https://unpkg.com/@antv/[email protected]/dist/index.min.js',
    'https://unpkg.com/@antv/[email protected]/dist/index.umd.min.js',
  ];
  register('layout', type, AntVLayout);
});

...

 <GraphGL<AntVLayoutOptions>
    options={{
        layout: {
            type: 'd3force'
        }
    }}
 />

• force
• forceAtlas2
• fruchterman
• d3force
• circular
• grid
• random
• mds
• concentric
• dagre
• radial

Custom Layout Demo

import { Layouts, LayoutBaseProps, LayoutOptionsBase } from '@graphgl/react';
import forceAtlas2, {
  ForceAtlas2Settings,
} from 'graphology-layout-forceatlas2';
import FA2Layout from 'graphology-layout-forceatlas2/worker';
import Graphology from 'graphology';

const getNodesBuffer = (nodes: any) => {
  const length = nodes.length;
  const nodeBuffer = new Float32Array(length * 2);
  for (let index = 0; index < length; index++) {
    nodeBuffer[index * 2] = nodes[index].attributes?.x as number;
    nodeBuffer[index * 2 + 1] = nodes[index].attributes?.y as number;
  }
  return nodeBuffer;
};

export type GraphologyLayoutOptions = LayoutOptionsBase<
      {
        type: 'graphology-forceatlas2';
        isTick?: boolean;
      } & ForceAtlas2Settings
    >;

export type GraphologyLayoutProps = LayoutBaseProps<GraphologyLayoutOptions>;

export default class GraphologyLayout extends Layouts.BaseLayout {
  public options: GraphologyLayoutProps['options'] | null = null;
  public nodes: GraphologyLayoutProps['nodes'] = [];
  public edges: GraphologyLayoutProps['edges'] = [];
  public layout: FA2Layout | null = null;
  static layouts = ['graphology-forceatlas2'];
  static workerScirptURL: string | string[] = [];

  constructor(opts: GraphologyLayoutProps) {
    super();
    this.options = opts.options;
    this.nodes = opts.nodes;
    this.edges = opts.edges;
  }

  public destroy() {
    this.layout?.stop();
    this.layout?.kill();
  }

  public execute() {
    const { nodes, edges, options } = this;
    const { onTick, onLayoutEnd, isTick, type, ...restOptions } =
      options as GraphologyLayoutProps['options'];

    const graph = new Graphology();

    graph.import({
      nodes: nodes.map((item) => ({
        key: item.id,
        attributes: {
          x: item.x === undefined ? Math.random() * 2000 - 1000 : item.x,
          y: item.y === undefined ? Math.random() * 2000 - 1000 : item.y,
        },
      })),
      edges: edges,
    });

    const sensibleSettings = forceAtlas2.inferSettings(graph);

    const layout = new FA2Layout(graph, {
      settings: {
        ...sensibleSettings,
        ...restOptions,
      },
    });

    this.layout = layout;

    this.layout.start();

    const animate = () => {
      requestAnimationFrame(() => {
        const results = graph.export().nodes;
        const nodesBuffer = getNodesBuffer(results);

        if (this.layout?.isRunning()) {
          onTick?.(nodesBuffer);
          animate();
        } else {
          onLayoutEnd?.(nodesBuffer);
        }
      });
    };

    animate();
  }
}