@antv/layout-gpu

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

Usage

NPM

1# npm
2$ npm install @antv/layout-gpu --save
3
4# yarn
5$ yarn add @antv/layout-gpu

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

1import { Graph } from "@antv/graphlib";
2import { FruchtermanLayout } from "@antv/layout-gpu";
3
4const graph = new Graph({ nodes: [], edges: [] });
5
6const fruchtermanLayout = new FruchtermanLayout();
7
8(async () => {
9  // Return positions of nodes & edges.
10  const positions = await fruchtermanLayout.execute(graph);
11  // Or to directly assign the positions to the nodes:
12  await circularLayout.assign(graph);
13})();

UMD

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

1<script
2  src="https://unpkg.com/@antv/graphlib"
3  type="application/javascript"
4></script>
5<script
6  src="https://unpkg.com/@antv/layout"
7  type="application/javascript"
8></script>
9<script
10  src="https://unpkg.com/@antv/layout-gpu"
11  type="application/javascript"
12></script>

Use layouts under LayoutGPU namespace.

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

Documentation

We provide the following parallelizable layouts:

• Fruchterman
• GForce

1import { Graph } from "@antv/graphlib";
2import { FruchtermanLayout } from "@antv/layout-gpu";
3
4const graph = new Graph({ nodes: [], edges: [] });
5
6const fruchtermanLayout = new FruchtermanLayout({
7  center: [200, 200],
8});
9const 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.

GForce

License

The scripts and documentation in this project are released under the MIT License.