cytoscape.js - 複合内での子の配置を可能にする cytoscape.js レイアウト (例: ドットのランクなど)

Question

サイトスケープを使用して出力を置き換え、インタラクティブにしようとしています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 では、