d3-dag

To migrate, replace import dagre from "dagre" with import { dagre } from "d3-dag".

Supported API

• Setup: setGraph, graph, setDefaultNodeLabel, setDefaultEdgeLabel, isDirected, isCompound, isMultigraph
• Nodes: setNode, setNodes, removeNode, hasNode, node, nodes, nodeCount, filterNodes
• Edges: setEdge, removeEdge, hasEdge, edge, edges, edgeCount, setPath
• Traversal: predecessors, successors, neighbors, inEdges, outEdges, nodeEdges, sources, sinks
• Layout: dagre.layout(grf) with optional Operator (e.g., sugiyama() or zherebko())

Unsupported API

• Compound graphs: setParent, parent, children
• Serialization: json.write, json.read
• Algorithms: alg.* (use d3-dag's native operators instead)

Important Differences

• Node Dimensions: Every node must have a positive width and height. Unlike dagre, nodes with zero dimensions (including those auto-created by setEdge without labels) will throw an error at layout time.
• Graph Config: graph() returns a shallow copy of the config; use setGraph for mutations.
• Edge Labels: edge(v, w) returns the same label object each call, and its points is recomputed on each read. Any label passed to setEdge is ignored; instead, use setDefaultEdgeLabel or similar mechanisms.

If you are using React Flow, you can replace dagre with d3-dag to use its advanced layout algorithms. The dagre export from d3-dag provides a compatible API for graph construction and layout.

To use it, construct a dagre.graphlib.Graph, set node dimensions (width and height are required), add edges, and call dagre.layout(grf).

import { dagre } from "d3-dag";

function getLayoutedElements(nodes, edges, direction = "TB") {
  const grf = new dagre.graphlib.Graph();
  grf.setGraph({ rankdir: direction });
  grf.setDefaultEdgeLabel(() => ({}));
  for (const node of nodes) {
    grf.setNode(node.id, {
      width: node.measured?.width ?? 172,
      height: node.measured?.height ?? 36,
    });
  }
  for (const edge of edges) grf.setEdge(edge.source, edge.target);
  dagre.layout(grf);
  return {
    nodes: nodes.map((node) => {
      const pos = grf.node(node.id);
      return {
        ...node,
        position: { x: pos.x - pos.width / 2, y: pos.y - pos.height / 2 },
      };
    }),
    edges,
  };
}

The Graph interface represents an immutable collection of GraphNodes and GraphLinks. It provides methods to iterate over the graph structure and query its properties.

Key Methods:

• nodes(): Returns an iterator over every node in the graph.
• links(): Returns an iterator over every link in the graph.
• topological(rank?: Rank): Computes a topological order of the nodes. If the graph contains cycles, it attempts to minimize edge inversions. You can provide a Rank accessor to constrain node positions.
• roots(): Returns nodes that are not descendants of any other node (handles cycles by picking a minimal set).
• leaves(): Returns nodes that are not ancestors of any other node (handles cycles by picking a minimal set).
• sources(): Returns nodes with in-degree zero (no parents).
• sinks(): Returns nodes with out-degree zero (no children).
• split(): Returns an iterator over the individual connected components of the graph.
• connected(): Returns true if the graph is a single connected component.
• multi(): Returns true if any node has multiple links to the same child.
• acyclic(): Returns true if the graph contains no cycles.
• nnodes(): Returns the number of nodes.
• nlinks(): Returns the number of links.

A GraphNode behaves like a Graph representing only its own connected component. It provides access to its own data and its immediate neighborhood.

Node Properties:

• data: The user-provided datum attached to the node.
• x, y: The raw coordinates of the node (throws if ux or uy are undefined).
• ux, uy: The raw (possibly undefined) x and y coordinates.

Neighborhood Methods:

• parents(): Iterator over unique parent nodes.
• children(): Iterator over unique child nodes.
• parentLinks(): Iterator over links coming from parents.
• childLinks(): Iterator over links going to children.
• parentCounts(): Iterator of [GraphNode, number] representing parents and the number of links from them.
• childCounts(): Iterator of [GraphNode, number] representing children and the number of links to them.
• ancestors(): Iterator of all nodes reachable through parents (includes the node itself).
• descendants(): Iterator of all nodes reachable through children (includes the node itself).
• nparents(), nchildren(), nparentLinks(), nchildLinks(): Counts for parents, children, and links.

A Layering operator is responsible for assigning every node in a graph a y-coordinate that respects a provided Separation function. The operator must return the total height of the layout, such that all node coordinates plus their separation are within the returned height.

While built-in operators cover most use cases, you can implement a custom one if your nodes already contain y-coordinate data. Note that a custom implementation must still respect the sep function to be valid.

function exampleLayering<N extends { y: number }, L>(dag: Graph<N, L>, sep: Separation<N, L>): number {
    // determine span of ys
    let min = Infinity;
    let max = -Infinity;
    for (const node of dag) {
        const y = node.y = node.data.y;
        min = Math.min(min, y - sep(undefined, node));
        max = Math.max(max, y + sep(node, undefined));
    }
    // assign ys
    for (const node of dag) {
        node.y -= min;
    }
    return max - min;
}