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);

效果：