mxgraph 中的自动泳道布局答案

【问题标题】：Automatic swimlane layout in mxgraphmxgraph 中的自动泳道布局
【发布时间】：2020-07-06 16:09:52
【问题描述】：

mxgraph 中有泳道example，但它不是自动的。所以我以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]);

这是test page。

现在，这里有两个问题：

节点未放置在通道内；似乎根本不尊重车道。如何进行布局以将节点放置在适当的通道内？像父母一样划清界限似乎是不够的。
我以为 WEST 会在左侧构建图表，但结果恰恰相反……NORTH 也下降了……为什么？

【问题讨论】：

我以为 WEST 会在左侧构建图形，但结果恰恰相反...... NORTH 也下降了......为什么？ 似乎它声明了起点跨度>
这是有道理的。但不幸的是，这是最不重要的……
你找到Q1的答案了吗？
你找到解决方法了吗？
我们使用了 dagre-d3。

标签： javascript mxgraph

【解决方案1】：

远非完美，但在某种程度上有所改进：

Demo

我已添加：

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

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

【讨论】：

这是它在 d3 中的样子：jsfiddle.net/scu7nfv9 - 唯一需要的是使用 js 调整框的宽度。
谢谢@queen3。如果您给出答案，如果 David 或其他人没有提供代表 mxgraph 解决方案的答案，我会认为它是赏金的主要候选人。
谢谢，@Godric！很高兴投票，但我真的希望看到一些既能展示包容又能展示良好布局的东西。然而，这可能需要 mxgraph 创建者/维护者的回应。
赏金将在几分钟后到期，超出我的控制范围，代替 David 或 mxgraph 团队的完整回答，或有用的 d3 @987654325 的 comment-to-answer 转换@ by queen3，我决定至少奖励戈德里克的进步。谢谢。

【解决方案2】：

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

（与数据格式不兼容）

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

【讨论】：