Javascript mxgraph中的自动泳道布局

mxgraph中有泳道，但它不是自动的。因此，我将该示例作为基础，并做了一些更改：

• 始终使用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]);

这是我的建议

现在，这里有两个问题：

• 节点未放置在车道内；看来车道根本不受尊重。如何进行布局以将节点放置在适当的通道内？设置车道作为家长似乎是不够的
• 我以为韦斯特会在左边画一幅图，但事实恰恰相反。。。北方也在下降。。。为什么?

---

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

我补充说：

layout.execute（lane1[v1、v2、v3、v4]）；
执行（lane2，[v5，v6，v7，v8]）；

将

resizeParent

更改为

false

，看起来车道得到了尊重，但看起来仍然不令人愉快

---

我也面临同样的问题，我能够解决它。 在我的代码中，为了自动重新排列图形，我使用了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]);
}

（与数据格式不兼容）

希望这有帮助。

---

我不完全理解这些变化是如何/为什么起作用的。图书馆的作者也许能帮上忙。

我以为韦斯特会在左边绘制图表，但事实恰恰相反。。。北方也在下降。。。为什么？似乎它宣告了一个有意义的起点。但不幸的是，这是最不重要的一个问题……你能找到Q1的答案吗？你找到解决方案了吗？我们使用了dagre-d3。d3中的情况如下：-唯一需要的是使用js调整盒子的宽度相等。谢谢，@queen3。如果你能回答这个问题，我认为如果戴维或某人没有产生一个表示MxGrice解决方案的答案，那么它是奖金的主要候选人。谢谢，哥德里克！很高兴向上投票，但我真的希望看到一些既能展示包容又能展示良好布局的东西。然而，这可能需要mxgraph创作者/维护者的回应。由于奖金在几分钟内就在我的控制之外到期，我决定奖励哥德里克，以代替大卫或mxgraph团队的完整答案，或queen3对有用的d3进行的a-to-answer转换，至少奖励他的进步。非常感谢。

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