TypeScript dagre.layout函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中dagre.layout函数的典型用法代码示例。如果您正苦于以下问题：TypeScript layout函数的具体用法？TypeScript layout怎么用？TypeScript layout使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了layout函数的3个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: Hierarchy

export function Hierarchy(graphData: GraphData, _width, _height, options) {
    const digraph = new graphlib.Graph({ multigraph: true, compound: true })
        .setGraph(options)
        .setDefaultNodeLabel(function () { return {}; })
        .setDefaultEdgeLabel(function () { return {}; })
        ;
    graphData.eachNode(function (u) {
        const value = graphData.node(u);
        const clientSize = value.getBBox();
        digraph.setNode(u, {
            width: clientSize.width,
            height: clientSize.height
        });
    });
    graphData.eachEdge(function (e, s, t) {
        const value = graphData.edge(e);
        digraph.setEdge(s, t, {
            weight: value.weight()
        }, value._id);
        if (!options.digraph) {
            digraph.setEdge(t, s, {
                weight: value.weight()
            }, value._id);
        }
    });
    graphData.eachNode(function (u) {
        digraph.setParent(u, graphData.parent(u));
    });
    this.dagreLayout = layout(digraph, { debugTiming: false } as GraphLabel);
    const deltaX = -digraph.graph().width / 2;
    const deltaY = -digraph.graph().height / 2;
    digraph.nodes().forEach(function (u) {
        const value = digraph.node(u);
        value.x += deltaX + _width / 2;
        value.y += deltaY + _height / 2;
    });
    digraph.edges().forEach(function (e) {
        const value = digraph.edge(e);
        for (let i = 0; i < value.points.length; ++i) {
            value.points[i].x += deltaX + _width / 2;
            value.points[i].y += deltaY + _height / 2;
        }
    });
    this.digraph = digraph;
}

开发者ID:GordonSmith，项目名称:Visualization，代码行数:45，代码来源:GraphLayouts.ts

示例2: distributeGraph

function distributeGraph(model) {
	let nodes = mapElements(model);
	let edges = mapEdges(model);
	let graph = new dagre.graphlib.Graph();
	graph.setGraph({});
	graph.setDefaultEdgeLabel(() => ({}));
	//add elements to dagre graph
	nodes.forEach(node => {
		graph.setNode(node.id, node.metadata);
	});
	edges.forEach(edge => {
		if (edge.from && edge.to) {
			graph.setEdge(edge.from, edge.to);
		}
	});
	//auto-distribute
	dagre.layout(graph);
	return graph.nodes().map(node => graph.node(node));
}

开发者ID:ajthinking，项目名称:react-diagrams，代码行数:19，代码来源:dagre-utils.ts

示例3: buildGraph

function buildGraph(sinks: Object): Dagre.Graph {
  const idTable = new IdTable();
  const graph = new dagre.graphlib.Graph();
  graph.setGraph({nodesep: 60, ranksep: 20});
  for (let key in sinks) {
    if (sinks.hasOwnProperty(key)) {
      const node: StreamGraphNode = {
        id: idTable.getId(sinks[key]),
        label: key,
        type: 'sink',
        stream: sinks[key],
        width: SINK_NODE_SIZE[0],
        height: SINK_NODE_SIZE[1],
      };
      graph.setNode(idTable.getId(sinks[key]), node);
      traverse(graph, idTable, sinks[key]);
    }
  }
  dagre.layout(graph);
  return graph;
}

开发者ID:whitecolor，项目名称:cyclejs，代码行数:21，代码来源:graphSerializer.ts

注：本文中的dagre.layout函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。