antvis
@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-gpuChoose 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.
LayoutOptions:
center[number, number] The center of the graph. e.g.[0, 0]widthnumber The width of the graph. The default value is300.heightnumber The height of the graph. The default value is300.maxIterationnumber The default value is1000.gravitynumber The gravity, which will affect the compactness of the layout. The default value is10.speednumber The moving speed of each iteraction. Large value of the speed might lead to violent swing. The default value is5.
GForce
License
The scripts and documentation in this project are released under the MIT License.