MxGraph从入门到精通之4：布局

本文介绍MxGraph支持的几种常用布局方式。

mxCircleLayout-圆形布局

圆形布局不关注节点之间的连线，节点之间有没有连线不影响最终效果。

核心代码：

for(let i=1; i< 10; i++){
     
	graph.insertVertex(parent, null, 'Hello' + i, 0, 0, 80, 30);
}
let layout = new mxCircleLayout(graph,200); // 创建圆形布局，第二个参数为圆形的半径，默认为100
layout.execute(parent);  // 将布局应用到根节点

效果：

mxCompactTreeLayout-树状布局

树状布局只对相互连接的节点有效，没有连接到树上的节点会被忽略，树状布局适合无环图。

核心代码：

let vertexMap = {
     }
for(let i=1; i< 10; i++){
     
	vertexMap[i] = graph.insertVertex(parent, null, 'Hello' + i, 0, 0, 80, 30);
	graph.insertEdge(parent, null, '', vertexMap[Math.floor(i/2)], vertexMap[i]); // 构建一棵树
}
let layout = new mxCompactTreeLayout(graph);
layout.execute(parent);

效果：

mxFastOrganicLayout-组织状布局

快速生成组织状的图，生成的图是随机的，每次生成形状可能都不一样，只对连接的节点有效，没有连接的节点会被忽略。

核心代码：

let vertexMap = {
     }
for(let i=1; i< 10; i++){
     
	vertexMap[i] = graph.insertVertex(parent, null, 'Hello' + i, 0, 0, 80, 30);
	graph.insertEdge(parent, null, '', vertexMap[Math.floor(i/2)], vertexMap[i]); // 构建一棵树
}
let layout = new mxFastOrganicLayout(graph);
layout.execute(parent);

效果：