結合mxGraph中的佈局

Question

我使用分層佈局作爲我的頁面的默認值。我想使用一些頂點（「2」）作爲其他元素的容器（「2.1」...「2.3」）。

我該如何做到這一點？

var graph = new mxGraph(document.getElementById('graphContainer')); 
 
var layout = new mxHierarchicalLayout(graph); 
 

 
graph.getModel().beginUpdate(); 
 
try { 
 
    var parent = graph.getDefaultParent(); 
 
    var v0 = graph.insertVertex(parent, null, "0", 0, 0, 240, 30); 
 
    var v1 = graph.insertVertex(parent, null, "1", 0, 0, 240, 30); 
 

 
    graph.insertEdge(parent, null, null, v0, v1); 
 

 
    var v2 = this.graph.insertVertex(parent, null, "2", 0, 0, 240, 30, 'o1'); 
 
    graph.insertEdge(parent, null, null, v1, v2); 
 

 
    graph.insertVertex(v2, null, "2.1", 0, 0, 220, 30); 
 
    graph.insertVertex(v2, null, "2.2", 0, 0, 220, 30); 
 
    graph.insertVertex(v2, null, "2.3", 0, 0, 220, 30); 
 

 
    var v3 = this.graph.insertVertex(parent, null, "3", 0, 0, 240, 30); 
 
    graph.insertEdge(parent, null, null, v1, v3); 
 

 
    layout.execute(parent); 
 

 
} finally { 
 
    graph.getModel().endUpdate(); 
 
}

<script src="http://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script> 
 
<div id="graphContainer" />

Answer 1

的beginUpdate()和endUpdate()之間的段是所有一種化合物的操作。 mxGraph會在每次更改時更新模型，但只會觸發模型更改的事件並在endUpdate()之後重新繪製。

所以，你可以只調用依次佈局，它會出現爲一個撤消的操作。

如果你從孩子最細胞中最頂層的容器佈局，您可能需要切換：

mxHierarchicalLayout.resizeParent 

mxHierarchicalLayout.moveParent 

到true。有關更多詳細信息，請參見relevant entries in the class API specs。