@antv/layout

What is @antv/layout?

@antv/layout is a layout algorithm library for graph visualization. It provides various layout algorithms to arrange nodes and edges in a graph, making it easier to visualize complex data structures.

What are @antv/layout's main functionalities?

Force Layout

The Force Layout algorithm simulates physical forces to position nodes in a graph. It is useful for visualizing undirected graphs where the relationships between nodes are not hierarchical.

const { Layout } = require('@antv/layout');
const data = { nodes: [...], edges: [...] };
const layout = new Layout({ type: 'force' });
const result = layout.layout(data);
console.log(result);

Circular Layout

The Circular Layout algorithm arranges nodes in a circle. This layout is useful for visualizing cyclic structures or when you want to emphasize the equal importance of nodes.

const { Layout } = require('@antv/layout');
const data = { nodes: [...], edges: [...] };
const layout = new Layout({ type: 'circular' });
const result = layout.layout(data);
console.log(result);

Grid Layout

The Grid Layout algorithm arranges nodes in a grid. This layout is useful for visualizing data in a structured, tabular format.

const { Layout } = require('@antv/layout');
const data = { nodes: [...], edges: [...] };
const layout = new Layout({ type: 'grid' });
const result = layout.layout(data);
console.log(result);

Radial Layout

The Radial Layout algorithm arranges nodes in concentric circles. This layout is useful for visualizing hierarchical data with a central root node.

const { Layout } = require('@antv/layout');
const data = { nodes: [...], edges: [...] };
const layout = new Layout({ type: 'radial' });
const result = layout.layout(data);
console.log(result);

Other packages similar to @antv/layout

cytoscape

Cytoscape is a graph theory library for visualizing and analyzing network data. It offers a variety of layout algorithms similar to @antv/layout, such as force-directed, grid, and circular layouts. Cytoscape is highly customizable and integrates well with other data visualization libraries.

d3-force

d3-force is a module of the D3.js library that provides force-directed graph layout algorithms. It is highly flexible and allows for fine-tuned control over the simulation parameters. While it offers similar functionality to @antv/layout, it requires more manual configuration.

vis-network

vis-network is part of the vis.js library and provides network visualization capabilities. It includes various layout algorithms such as hierarchical, grid, and random layouts. vis-network is easy to use and integrates well with other vis.js modules.

README

About

Collection of basic layout algorithms to be used with @antv/graphlib.

Living Demo

Usage

NPM

Install @antv/layout first.

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

# yarn
$ yarn add @antv/layout

Choose a layout algorithm from @antv/layout then.

import { Graph } from "@antv/graphlib";
import { CircularLayout } from "@antv/layout";

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

const circularLayout = new CircularLayout({ radius: 10 });

// 1. Return positions of nodes & edges.
const positions = circularLayout.execute(graph);

// 2. To directly assign the positions to the nodes:
circularLayout.assign(graph);

UMD

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

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

Use layouts under Layout namespace.

const { Graph } = window.GraphLib;
const { CircularLayout } = window.Layout;

Documentation

• G6 Layout

Layout algorithms can be divided into two categories, the first is synchronous, e.g. circular layout

Circular

Circular layout arranges the node on a circle. By tuning the configurations, user can adjust the node ordering method, division number, radial layout, and so on. G6 implements it according to the paper: A framework and algorithms for circular drawings of graphs.

Arguments

• graph Graph: target graph.
• options? LayoutOptions.
  • center [number, number] The center of the graph. e.g. [0, 0]
  • radius number The radius of the circle. If the raidus exists, startRadius and endRadius do not take effect.
  • startRadius number The start radius of spiral layout. The default value is null.
  • endRadius number The end radius of spiral layout. The default value is null.
  • clockwise boolean Whether to layout clockwisely. The default value is true.
  • divisions number The division number of the nodes on the circle. Takes effect when endRadius - startRadius !== 0. The default value is 1.
  • ordering null | 'topology' | 'degree' The ordering method for nodes. null by default, which means the nodes are arranged in data order. 'topology' means in topology order; 'degree' means in degree order.
  • angleRatio number How many 2*PIs Between the first node and the last node. The default value is 1.

Supervisor

const graph = new Graph();
const layout = new CircularLayout();

const supervisor = new Supervisor(graph, layout, { auto: true });
supervisor.start();

License

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