How to use dagre - 10 common examples
To help you get started, we’ve selected a few dagre examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
GoogleCloudPlatform / professional-services / tools / bq-visualizer / src / app / dagre-layout.service.ts View on Github 
// Default to assigning a new object as a label for each new edge.
g.setDefaultEdgeLabel(() => ({}));
// set nodes
for (const node of bqPlan.nodes) {
const label = node.name.length > 22 ?
`${node.name.slice(0, 10)}...${node.name.slice(-10)}` :
node.name;
g.setNode(node.id, {label: label, height: 50, width: 50});
}
// set edges
for (const edge of bqPlan.edges) {
g.setEdge(edge.from.id, edge.to.id);
}
dagre.layout(g);
return g;
}
}function layout(dag) {
const g = new dagre.graphlib.Graph(),
info = {};
g.setGraph(info);
dag.nodes().forEach(n => g.setNode(n.id, n));
dag.links().forEach(l => g.setEdge(l.source.id, l.target.id, l));
dagre.layout(g);
// Rescale
dag.links().forEach(link => {
const { source, target, points } = link;
// XXX These are because of perceived bugs in dagre
if (points) {
points[0].y = source.y;
points[points.length - 1].y = target.y;
points.forEach(p => {
p.x *= width / info.width;
p.y *= height / info.height;
});
} else {
link.points = [{x: source.x, y: source.y}, {x: target.x, y: target.y}];
}
});private layout(elements) {
const g = new dagre.graphlib.Graph();
g.setGraph({marginx: 50, marginy: 10, ranksep: 100, nodesep: 50});
g.setDefaultEdgeLabel(() => ({}) as any);
// set nodes
// width and height must match the CSS values
elements.nodes.forEach(node => g.setNode(node.id, {width: 165, height: 65}));
// set edges
this.p.getAllConnections().forEach(edge => g.setEdge(edge.source.id, edge.target.id));
// calculate the layout (node positions)
dagre.layout(g);
// apply the results of layout in form of css top+left properties
elements.nodes.forEach(node => {
const n = g.node(node.id);
const top = Math.round(n.y - (n.height / 2));
const left = Math.round(n.x - (n.width / 2));
const element = document.getElementById(node.id);
element.style.left = `${left}px`;
element.style.top = `${top}px`;
});
requestAnimationFrame(this.p.repaintEverything.bind(this.p));
}node.width = Math.max(node.width, v.property.length * 10);
});
g.addNode(k, node);
});
// build the edges from node to node
_.forOwn(libraryEdges, function (links) {
links.forEach(function (link) {
if (g.hasNode(link.from) && g.hasNode(link.to)) {
g.addEdge(null, link.from, link.to);
}
});
});
// generate the graph layout
var layout = dagre.layout()
.nodeSep(30)
// .rankSep(70)
// .rankDir('TB')
.run(g);
var nodes = [],
edges = [],
center = {x: 0, y: 0},
mn = {x: Infinity, y: Infinity},
mx = {x: -Infinity, y: -Infinity},
total = g.nodes().length;
// update the node info adding:
// - x (x-coordinate of the center of the node)
// - y (y-coordinate of the center of the node)
// - predecessors (an array with the identifiers of the predecessors of this node)node.width = Math.max(node.width, v.property.length * 10);
});
g.addNode(k, node);
});
// build the edges from node to node
_.forOwn(libraryEdges, function (links) {
links.forEach(function (link) {
if (g.hasNode(link.from) && g.hasNode(link.to)) {
g.addEdge(null, link.from, link.to);
}
});
});
// generate the graph layout
var layout = dagre.layout()
.nodeSep(30)
// .rankSep(70)
// .rankDir('TB')
.run(g);
var nodes = [],
edges = [],
center = {x: 0, y: 0},
mn = {x: Infinity, y: Infinity},
mx = {x: -Infinity, y: -Infinity},
total = g.nodes().length;
// update the node info adding:
// - x (x-coordinate of the center of the node)
// - y (y-coordinate of the center of the node)
// - predecessors (an array with the identifiers of the predecessors of this node)function Renderer() {
// Set up defaults...
this._layout = layout();
this.drawNodes(defaultDrawNodes);
this.drawEdgeLabels(defaultDrawEdgeLabels);
this.drawEdgePaths(defaultDrawEdgePaths);
this.positionNodes(defaultPositionNodes);
this.positionEdgeLabels(defaultPositionEdgeLabels);
this.positionEdgePaths(defaultPositionEdgePaths);
this.zoomSetup(defaultZoomSetup);
this.zoom(defaultZoom);
this.transition(defaultTransition);
this.postLayout(defaultPostLayout);
this.postRender(defaultPostRender);
this.edgeInterpolate('bundle');
this.edgeTension(0.95);
}function Renderer() {
// Set up defaults...
this._layout = layout();
this.drawNodes(defaultDrawNodes);
this.drawEdgeLabels(defaultDrawEdgeLabels);
this.drawEdgePaths(defaultDrawEdgePaths);
this.positionNodes(defaultPositionNodes);
this.positionEdgeLabels(defaultPositionEdgeLabels);
this.positionEdgePaths(defaultPositionEdgePaths);
this.transition(defaultTransition);
this.postLayout(defaultPostLayout);
this.postRender(defaultPostRender);
this.edgeInterpolate('bundle');
this.edgeTension(0.95);
}function Renderer() {
// Set up defaults...
this._layout = layout();
this.drawNodes(defaultDrawNodes);
this.drawEdgeLabels(defaultDrawEdgeLabels);
this.drawEdgePaths(defaultDrawEdgePaths);
this.positionNodes(defaultPositionNodes);
this.positionEdgeLabels(defaultPositionEdgeLabels);
this.positionEdgePaths(defaultPositionEdgePaths);
this.transition(defaultTransition);
this.postLayout(defaultPostLayout);
this.postRender(defaultPostRender);
this.edgeInterpolate('bundle');
this.edgeTension(0.95);
}}
}
function processNode(node: ResourceTreeNode, root: ResourceTreeNode, colors?: string[]) {
graph.setNode(treeNodeKey(node), {...node, width: NODE_WIDTH, height: NODE_HEIGHT, root});
(childrenByParentKey.get(treeNodeKey(node)) || []).sort(compareNodes).forEach(child => {
if (treeNodeKey(child) === treeNodeKey(root)) {
return;
}
if (node.namespace === child.namespace) {
graph.setEdge(treeNodeKey(node), treeNodeKey(child), {colors});
}
processNode(child, root, colors);
});
}
dagre.layout(graph);
const edges: {from: string; to: string; lines: Line[]; backgroundImage?: string}[] = [];
graph.edges().forEach(edgeInfo => {
const edge = graph.edge(edgeInfo);
const colors = (edge.colors as string[]) || [];
let backgroundImage: string;
if (colors.length > 0) {
const step = 100 / colors.length;
const gradient = colors.map((lineColor, i) => {
return `${lineColor} ${step * i}%, ${lineColor} ${step * i + step / 2}%, transparent ${step * i + step / 2}%, transparent ${step * (i + 1)}%`;
});
backgroundImage = `linear-gradient(90deg, ${gradient})`;
}
const lines: Line[] = [];
// don't render connections from hidden node representing internal trafficoutput.endpoints.forEach(endpoint => {
let sourceFrames = this._frames.filter(f => f.nodes.indexOf(node) !== -1);
let targetFrames = this._frames.filter(f => f.nodes.some(n => n.block === endpoint.ownerBlock));
let sourceId = sourceFrames.length > 0 ? sourceFrames[0].id : node.id;
let targetId = targetFrames.length > 0 ? targetFrames[0].id : endpoint.ownerBlock.uniqueId;
graph.setEdge(sourceId.toString(), targetId.toString());
});
});
});
// Distribute
dagre.layout(graph);
// Update graph
let dagreNodes = graph.nodes().map(node => graph.node(node));
dagreNodes.forEach(dagreNode => {
if (dagreNode.type === "node") {
for (var node of this._nodes) {
if (node.id === dagreNode.id) {
node.x = dagreNode.x - dagreNode.width / 2;
node.y = dagreNode.y - dagreNode.height / 2;
node.cleanAccumulation();
return;
}
}
return;
}
