@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

Layout algorithms for AntV

Installation

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

# yarn
$ yarn add @antv/layout

Usage

import { GridLayout } from '@antv/layout'

const model = {
  nodes: [
    {
      id: 'node1',
      x: 0,
      y: 0,
    }, {
      id: 'node2',
      x: 20,
      y: 20,
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}

const gridLayout = new GridLayout({
  type: 'grid',
  width: 600,
  height: 400,
  rows: 4,
  cols: 4,
})

const newModel = gridLayout.layout(model)

Documentation

• G6 Layout

License

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