cytoscape.js布局，允许子内的化合物定位（例如像点的等级）

Question

我想用cytoscape替换我的dot输出并使其交互（移动节点和化合物，展开/折叠化合物等） 一个图形首先加载，但用户应该使用默认布局。但是，我很努力地找到一个支持dot调用rank的布局/配置。

在我的图中，我有表示组件的复合节点。组件包含其他组件和/或状态，转换，变量。 每个组件可以指定inputs和outputs。 在点中，我试图在系统（rankdir=LR;）的左侧（rank=source;）和outputs（rank=sink;）上放置inputs来在系统内添加某种形式的流（rankdir=LR;）。 其他元素没有rank，因此可以自由定位。 然后我指定cluster子图包含所有递归组件。

现在，这里是我在点。我希望它能解释我想要结束的事情。

首先，我已经看到this question，但据我的理解它是手动定位，而不是布局。

我还没有找到完全支持化合物内定位节点的布局。 我看着使用cytoscape.js可乐布局以下选项：

layout: { 
    name: 'cola', 
    flow: { axis: 'y', minSeparation: 40 }, 
    avoidOverlap: true 
    } 

我结束了这个 正如你所看到的，有一些流量，但没有很好地为dot。

我试着为alignment参数添加一些函数，但据我所知，我只能指定绝对坐标（例如return {'x': 0};）。这基本上允许我对齐所有的输入，而不是一个化合物的所有输入。

这里是我的榜样的CodePen一起玩：https://codepen.io/anon/pen/GEaOQQ 在JavaScript中，你可以看到

Answer 1

你可以尝试克莱评论：https://github.com/cytoscape/cytoscape.js-klay

如果现有的任何布局不满足您的要求，您可以使用writing a layout extension所需的任何算法。如果你喜欢，你可以使用dot/graphviz移植你正在使用的确切布局。