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。

在mxGraph中组合布局

1 个答案: