Function grid

create a new Grid with default settings.

The grid layout algorithm constructs a horizontally compact topological representation of the dag. The nodes are topologically ordered and then put into lanes such that an edge can travel horizontally to the lane of a child node, and then down without intersecting to that child.

This layout produces good representations when you want a compressed layout where each node is on an independent horizontal line.

Remarks

The current implementation doesn't render multi-dags any differently, so multiple edges going to the same node will be rendered as a single edge.

Example

using the default layout

const grf = ...
const layout = grid();
const { width, height } = layout(dag);
for (const node of dag) {
  console.log(node.x, node.y);
}
Copy

Example

In addition to the standard modifications of Grid#rank, Grid#nodeSize, Grid#gap, and Grid#tweaks, Grid also supports altering the lane assignment Grid#lane:

const grf = ...
const layout = grid().lane(laneOpt());
const { width, height } = layout(dag);
for (const node of dag) {
  console.log(node.x, node.y);
}
Copy