17

mxgraph 中有泳道示例，但它不是自动的。所以我以graphlayout的例子为基础，做了一些改动：

  • 始终使用 mxSwimlaneLayout
  • 从泳道示例中获取泳道单元样式
  • 创建了两条泳道
  • 将它们用作顶点的父级

以下是我创建泳道的方法：

var lane1 = graph.insertVertex(parent, null, 'Lane 1', 0, 0, 1000, 100, 'swimlane');
var lane2 = graph.insertVertex(parent, null, 'Lane 2', 0, 100, 1000, 100, 'swimlane');
// use as parent...
var v1 = graph.insertVertex(lane1, null, 'A', 0, 0, w, h);

并执行布局：

layout.orientation = mxConstants.DIRECTION_WEST;
layout.resizeParent = true;
layout.execute(parent, [lane1, lane2]);

这是测试页。

现在，这里有两个问题：

  • 节点未放置在通道内；似乎根本不尊重车道。如何进行布局以将节点放置在适当的通道内？像父母一样划清界限似乎是不够的。
  • 我以为 WES​​T 会在左边建立图表，但事实恰恰相反...... NORTH 也会下降......为什么？
4

2 回答 2

5

远非完美，但不知何故有所改进：

演示

我已经添加：

layout.execute(lane1, [v1,v2,v3,v4]);
layout.execute(lane2, [v5,v6,v7,v8]);

并改为resizeParent，false看起来车道受到尊重，但看起来仍然不愉快。

在此处输入图像描述

于 2020-06-28T18:37:39.387 回答
0

我也面临同样的问题，我能够解决它。在我的代码中，为了自动重新排列我使用 mxSwimlanelayout 的图表：

var layout = new mxSwimlaneLayout(this.editor.graph,mxConstants.DIRECTION_WEST);
layout.execute(this.editor.graph.getDefaultParent(),this.editor.graph.getDefaultParent().children /*swimlanes*/);

虽然节点（泳道的子节点）是自动排列的，但泳道并没有得到尊重。（与作者相同）所以我通过库（mxClient.js）进行了调查。我做了以下更改：

mxSwimlaneLayout.prototype.resizeParent = true;
mxSwimlaneLayout.prototype.moveParent = true;

内部mxSwimlaneLayout.prototype.execute函数：替换this.graph.updateGroupBounds为this.updateGroupBounds

和内部mxSwimlaneLayout.prototype.updateGroupBounds函数，替换了以下块：

for (var i = 0; i < edge.edges.length; i++)
{
    cells.push(edge.edges[i]);
}

经过：

for (key2 in edge)
{
    cells.push(edge[key2].edges[0]);
}

（与数据格式不兼容）

希望这可以帮助。我不完全理解这些更改如何/为什么起作用。图书馆作者也许可以提供帮助。

于 2020-07-06T08:09:52.657 回答