collapsing/expanding cytoscape 中的复合节点

Question

cytoscape.js是否支持collapsing/expanding复合节点？

Eg. before collapsing

node1 (-)
--node1.1
--node1.2
------node1.2.1

折叠后

node1 (+)

expand/collapse 的 (+) 或 (-) 符号会很好。

正在寻找使用复合节点和 collapse/expand 通过用户交互对一组节点进行分组的选项。如果 cytoscape.js 默认情况下不支持此功能，任何 alternatives/workarounds 都可以达到目标吗？

Answer 1

使用 API 相对简单。

收起：node1.descendants().addClass('collapsed-child')

展开：node1.descendants().removeClass('collapsed-child')

... 其中 .collapsed-child { opacity: 0; }

您可能还想更改后代的位置，使父节点更小。或者，如果您不关心折叠子项的边缘，则可以将 display: none 用于 .collapsed-child。

Answer 2

对于其他人在 Cytoscape.js 中寻找删除节点及其子节点问题的解决方案，我尝试并失败了接受的答案中的（公认的日期）解决方案：.descendants() .

在 GitHub、

等待回复

https://github.com/cytoscape/cytoscape.js/issues/2877

我设计了以下解决方案。简而言之，我 :

使用 .successors() 而不是 .dependents()（上面建议的）
将数据保存在一个变量中；然后，恢复那些数据
无需 .addClass()

var myNode = cy.elements('node[name="Technology"]');

// cy.collection() : return a new, empty collection
// https://js.cytoscape.org/#cy.collection
var myCollection = cy.collection();

setTimeout(function(){
  console.log('Deleting "Technology" node + descendants ...')
  // Save data for later recall:
  // https://js.cytoscape.org/#cy.remove
  myCollection = myCollection.union(myNode.successors().targets().remove());
  myNode.successors().targets().remove();
  // nested setTimeout():
  setTimeout(function(){
    console.log('Restoring "Technology" node + descendants ...')
    myCollection.restore();
    console.log('Done!')
  }, 2000);
}, 2000);

collapsing/expanding cytoscape 中的复合节点

collapsing/expanding compound node in cytoscape

javascript

expand

collapse

cytoscape.js