@antv/layout-gpu

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

Usage

$3

``shell


npm

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

yarn

$ yarn add @antv/layout-gpu
`

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

`ts
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);
})();
`

$3

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

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

Use layouts under LayoutGPU namespace.

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

Documentation

We provide the following parallelizable layouts:

- [Fruchterman]()
- [GForce]()

`js
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);
`

$3

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`.

$3

License

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