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.

github GoogleCloudPlatform / professional-services / tools / bq-visualizer / src / app / dagre-layout.service.ts View on Github external
// 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;
  }
}
github erikbrinkman / d3-dag / src / layout.js View on Github external
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}];
      }
    });
github nokia / CloudFlow / src / app / engines / graph / graph.ts View on Github external
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));
    }
github mauriciopoppe / PojoViz / src / renderer / draw.js View on Github external
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)
github mauriciopoppe / PojoViz / build / pojoviz-renderers.js View on Github external
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)
github linkedin / WhereHows / wherehows-web / public / legacy-app / vendors / dagre-d3 / lib / Renderer.js View on Github external
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);
}
github paralin / meteor-dagre-d3 / dagre-d3.js View on Github external
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);
}
github apache / flink / flink-clients / src / main / resources / web-docs / js / dagre-d3.js View on Github external
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);
}
github argoproj / argo-cd / ui / src / app / applications / components / application-resource-tree / application-resource-tree.tsx View on Github external
}
    }

    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 traffic
github BabylonJS / Babylon.js / nodeEditor / src / diagram / graphCanvas.tsx View on Github external
output.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;
            }

dagre

Graph layout for JavaScript

MIT
Latest version published 5 years ago

Package Health Score

79 / 100
Full package analysis

Popular dagre functions