sun-hierarchy's Introduction

sun-hierarchy

A library for hierarchy graph layout based on sugiyama framework

Install

npm i sun-hierarchy --save

yarn add sun-hierarchy --save

Intro

This library is based on sugiyama framework, there are 4 steps to handle input graph

divide the input graph into separate isolate graphs
use longest path to determine hierarchy of each graph
reduce crossings by heuristic barycentric method
position vertices of each level with essay: "Fast and Simple Horizontal Coordinate Assignment"

Playground

https://sylsaint.github.io/sun-hierarchy-playground/

Usage

import layout, { Graph, Vertex, Edge, LayoutOptions } from 'sun-hierarchy';

const options: LayoutOptions = {
  // node width
  width: 150,
  // node height
  height: 50,
  // node margin
  margin: { left: 0, right: 0, top: 0, bottom: 0 },
  // barycentric iteration round number, default 12  
  barycentricOptions: { totalRound: 10 }
};

const vertices: Vertex[] = [];
for (let i = 0; i < 10; i++) {
  vertices.push(new Vertex(i));
}
const edges: Edge[] = [];
edges.push(new Edge(vertices[1], vertices[4]));
edges.push(new Edge(vertices[1], vertices[5]));
edges.push(new Edge(vertices[4], vertices[3]));
edges.push(new Edge(vertices[5], vertices[2]));
edges.push(new Edge(vertices[6], vertices[2]));
edges.push(new Edge(vertices[7], vertices[3]));
edges.push(new Edge(vertices[7], vertices[9]));
edges.push(new Edge(vertices[8], vertices[5]));

const g: Graph = new Graph(vertices.slice(1), edges, { directed: true });
const graphs: Graph[] = layout(g, options);

Recommend Projects