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

【问题标题】：collapsing/expanding compound node in cytoscape在 cytoscape 中折叠/扩展复合节点
【发布时间】：2015-08-10 00:25:00
【问题描述】：

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

Eg. before collapsing

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

折叠后

node1 (+)

一个 (+) 或 (-) 符号来展开/折叠会很棒。

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

【问题讨论】：

标签： javascript collapse expand cytoscape.js

【解决方案1】：

使用 API 相对简单。

折叠：node1.descendants().addClass('collapsed-child')

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

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

您可能还想更改后代的位置，以使父节点更小。或者，如果您不关心看到折叠儿童的边缘，您可以使用display: none 代替.collapsed-child。

【讨论】：

感谢您的回答。需要测试一下。由于我必须将后代边缘移动到初始节点，因此我沿着编写 expandNodes /shrinkNodes 的路径并将其附加到单击事件。

【解决方案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);

【讨论】：