cytoscape.js - 你如何将节点传递给 cytoscape-cola.js 中的 gapInequalities？

Question

cytoscape.js-cola documentation对于 layout 字典的 gapInequalities 元素说:

  gapInequalities: undefined, // list of inequality constraints for the gap between the nodes,
                              // e.g. [{"axis":"y", "left":node1, "right":node2, "gap":25}]

如何设置指定 left 和 right 值中的节点的对象？

maxkfranz 很有帮助地指出了 here这些对象需要是 collection objects .这些包含对指定节点(“元素”)的引用，并通过查询 cytoscape.js“核心对象”创建。我不清楚的是，考虑到 layout 对象需要引用节点元素，并且在 layout 告诉如何之前不应将元素添加到图中呈现它们，您如何正确设置这些集合对象？

例如，要指定节点 b 应该放在节点 a 之上，用什么代替 ???a??? 和 ???b??? 在下面的代码中？

cy = cytoscape({
  elements: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      . . .
  ],
  layout: {
    name: 'cola',
    gapInequalities: [
        { axis: 'y', left: ???'a'???, right: ???'b'???, gap: 25 }
        . . .
    ],
    . . .
  }
  . . .
]);

在这种情况下，答案不能是 cy.$id('a') 和 cy.$id('b') 因为 cy 对象尚未创建。您可以通过创建不带元素的 cy 对象然后调用 cy.add() 来解决这个问题将它们放入。但是传递给 cytoscape() 的 layout 对象中会发生什么？

我对这两个都是新手 cytoscape.js和 cola.js ，所以我很可能只是在这里遗漏了一些非常基本的想法。一个简单的例子显示了哪些函数调用设置了对象以及调用它们的顺序可能会做到这一点。在我的应用程序中，节点和边逐渐添加到图形中，并且动画需要显示它们正在添加，所以无论如何，在开始时不设置所有元素更有意义。

Answer 1

由于您的节点和边是逐渐添加的，因此您可以创建没有元素和布局对象的cy对象。然后当新节点出现时，您可以将它们添加到图中并应用布局。

cy 对象初始化后，每次有新节点到来时，应用以下内容:

cy.add(...);
cy.layout({
  name: 'cola',
  gapInequalities: [{ axis: 'y', left: cy.$id("a"), right: cy.$id("b"), gap: 25 }],
  ...
}).run();