在cytoscape中折叠/扩展复合节点

Question

cytoscape.js是否支持折叠/扩展复合节点？

Eg. before collapsing

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

崩溃后

node1 (+)

扩展/折叠的（+）或（ - ）符号会很棒。

寻找使用Compound节点对一组节点进行分组并通过用户交互进行折叠/展开的选项。如果cytoscape.js默认不支持此功能，那么任何替代/解决方法都可以达到目标吗？

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);