AntV Layout

Basic layout algorithms for visualization

@antv/layout is a collection of basic layout algorithms. It ships with a wide range of layouts, unifies graph data and layout APIs, and turns graph structures into renderable coordinates.

✨ Highlights

• Coverage: common graph layouts (force, dagre, radial, grid, combo)
• Built for visualization: real-world scenarios and workflows
• Performance: fast defaults + optional WebWorker offloading
• Integration: easy to plug into your rendering pipeline
• TypeScript & docs: typed APIs with complete documentation

🧩 Layouts

Layout	Preview	Description
ForceAtlas2		Force-directed layout for large graphs with acceleration options (e.g. Barnes–Hut).
Force		Highly configurable force model for fine-grained tuning and process control.
Fruchterman		Classic force-directed layout for small/medium graphs with balanced distribution.
D3Force		d3-force style simulation wrapper for composing link/manyBody/collide forces.
D3Force3D		3D force layout based on d3-force-3d with z-axis forces and z output.
Dagre		Layered directed layout for DAGs, workflows, and dependency graphs.
AntVDagre		Production-oriented hierarchical layout with spacing, alignment, and path info.
Circular		Place nodes on a circle (or spiral) with ordering, angle, and radius controls.
Concentric		Layer nodes by an importance score (default: degree), pulling higher scores inward.
Radial		Focus-centered rings based on shortest-path distance for relationship exploration.
Grid		Stable grid placement for predictable layouts like cards, lists, and matrices.
MDS		Multidimensional scaling to match ideal distances and produce a balanced global structure.
ComboCombined		Composite layout for combos/subgraphs with per-level strategies and consistent bounds/spacing.

🚀 Installation

npm install @antv/layout

📝 Quick Start

import { CircularLayout } from '@antv/layout';

const data = {
  nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }],
  edges: [
    { source: 'node1', target: 'node2' },
    { source: 'node2', target: 'node3' },
  ],
};

async function run() {
  const layout = new CircularLayout({ center: [200, 200], radius: 150 });

  await layout.execute(data);

  layout.forEachNode((node) => {
    console.log(node.id, node.x, node.y);
  });
}

run();

🧵 Worker support

Set enableWorker: true to run layouts in a WebWorker when supported. See the docs for worker setup and layout configuration details.

🤝 Contributing

Contributions are welcome. See CONTRIBUTING.md for guidelines and local workflows.

📄 License

MIT licensed. See LICENSE for details.