@antv/layout-gpu NPM

@antv/layout-gpu

Accelerate some parallelizable algorithms such as Fruchterman with WebGPU which has a better performance under large amount of data.

Usage

NPM

# npm
$ npm install @antv/layout-gpu --save

# yarn
$ yarn add @antv/layout-gpu

Choose a layout algorithm from @antv/layout-gpu then.

import { Graph } from "@antv/graphlib";
import { FruchtermanLayout } from "@antv/layout-gpu";

const graph = new Graph({ nodes: [], edges: [] });

const fruchtermanLayout = new FruchtermanLayout();

(async () => {
  // Return positions of nodes & edges.
  const positions = await fruchtermanLayout.execute(graph);
  // Or to directly assign the positions to the nodes:
  await circularLayout.assign(graph);
})();

UMD

Import scripts in UMD version of @antv/graphlib, @antv/layout and @antv/layout-gpu.

<script
  src="https://unpkg.com/@antv/graphlib"
  type="application/javascript"
></script>
<script
  src="https://unpkg.com/@antv/layout"
  type="application/javascript"
></script>
<script
  src="https://unpkg.com/@antv/layout-gpu"
  type="application/javascript"
></script>

Use layouts under LayoutGPU namespace.

const { Graph } = window.GraphLib;
const { FruchtermanLayout } = window.LayoutGPU;

Documentation

We provide the following parallelizable layouts:

import { Graph } from "@antv/graphlib";
import { FruchtermanLayout } from "@antv/layout-gpu";

const graph = new Graph({ nodes: [], edges: [] });

const fruchtermanLayout = new FruchtermanLayout({
  center: [200, 200],
});
const positions = await fruchtermanLayout.execute(graph);

Fruchterman

Fruchterman is a kind of force-directed layout. The implementation is according to the paper Graph Drawing by Force-directed Placement.

Online Demo

LayoutOptions:

center number, number The center of the graph. e.g. [0, 0]
width number The width of the graph. The default value is 300.
height number The height of the graph. The default value is 300.
maxIteration number The default value is 1000.
gravity number The gravity, which will affect the compactness of the layout. The default value is 10.
speed number The moving speed of each iteraction. Large value of the speed might lead to violent swing. The default value is 5.