4

我正在尝试使用 cytoscape 来替换我的dot输出并使其具有交互性（移动节点和化合物、展开/折叠化合物等）。当第一次加载图表时，应该向用户呈现默认布局。但是，我正在努力寻找支持dot调用的布局/配置rank。

在我的图中，我有代表组件的复合节点。组件包含其他组件和/或状态、转换、变量。每个组件都可以指定inputs和outputs。在点中，我尝试通过将左侧 ( ) 和右侧 ( )rankdir=LR;定位来在系统 ( )中添加某种形式的流。其他元素没有，因此可以自由定位。然后我指定了包含所有递归组件的子图。inputsrank=source;outputsrank=sink;rankcluster

现在，这就是我在点中所拥有的。我希望它能解释我最终想要的结果。 显示结果的点示例

首先，我已经看到了这个问题，但据我了解，它是用于手动定位，而不是布局。

我还没有找到完全支持在复合内定位节点的布局。我研究了使用具有以下选项的 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 中，您可以看到以下注释

4

1 回答 1

2

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

如果任何现有布局不符合您的要求，您可以通过编写布局扩展来使用您喜欢的任何算法。如果您愿意，您可以使用 dot/ graphviz移植您正在使用的确切布局。

于 2017-07-27T19:25:21.867 回答