OuestWare's Graphology Experiments - Layout tree

A basic tree-shaped layout for graphology.

It picks (or is given) a root, builds a hierarchy by traversing the graph breadth-first, and assigns each node a position based on its depth. The result is a LayoutMapping of each node to its x / y coordinates.

Usage

import Graph from "graphology";

import { treeLayout } from "@ouestware/graphology-layout-tree";
import { applyLayout } from "@ouestware/graphology-layout-utils";

const graph = new Graph();
// ...populate the graph...

const layout = treeLayout(graph, {
  // Node to use as the tree root (optional, see Notes):
  root: "myRootNode",
  // Horizontal gap between depth levels:
  xGroupsOffset: 40,
});

// Write x / y back as node attributes:
applyLayout(graph, layout);

Notes

• The layout is laid out horizontally: depth increases along the x axis (x = xGroupsOffset × depth), and nodes are stacked along the y axis.
• If no root is given, it falls back to the node with the highest closeness centrality.
• The graph is treated as undirected when building the hierarchy.
• Disconnected graphs are supported: each connected component is laid out on its own and the components are packed together via arrangeRegions. The component holding root (if any) comes first. Otherwise, components are ordered from largest to smallest. Set isConnectedComponent: true to skip this step and treat the whole graph as a single tree.
• Spacing is controlled by xGroupsOffset (between depths, default 40), yInGroupOffset (between siblings at the same depth, default 5) and yGroupsOffset (when going back up a level, default 10). Region packing also accepts the padding option from arrangeRegions.