cytoscape.js布局允许儿童在复合体内定位（例如像点的等级）

Question

我正在尝试使用cytoscape替换我的dot输出并使其交互（移动节点和化合物，展开/折叠化合物等） 首次加载图形时，应向用户显示默认布局。但是，我很难找到支持dot调用rank的布局/配置。

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

现在，这就是我在dot中所拥有的。我希望它能解释我最终想要达到的目标。

首先，我已经看过this question，但据我所知，这是手动定位，而不是布局。

我没有找到完全支持化合物中定位节点的布局。 我研究了使用cytoscape.js-cola布局和以下选项：

  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

您可以尝试使用Klay：https://github.com/cytoscape/cytoscape.js-klay

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