在节点点击 Cytoscape 上隐藏和显示子节点答案

【问题标题】：Hide and Show Child Nodes on Node Tap Cytoscape在节点点击 Cytoscape 上隐藏和显示子节点
【发布时间】：2017-01-06 13:20:56
【问题描述】：

我正在尝试使用广度优先布局在 Cytoscape 中创建可折叠的树结构，以复制 D3 collapsible tree。

我正在尝试在节点上复制这种类型的点击操作，但还添加了恢复功能 - Images & breadthfirst layout

我选择 Cytoscape 的原因是因为我有一个场景，即树的节点有多个父节点。

我尝试使用以下代码添加点击事件：

cy.on('tap', 'node', function() {
    if (this.scratch().restData == null) {
       // Save node data and remove
       this.scratch({
            restData: this.connectedEdges().targets().remove()
       });
    } else {
       // Restore the removed nodes from saved data
       this.scratch().restData.restore();
       this.scratch({
            restData: null
       });
    }
}

但是，这只会成功折叠和展开其直接子节点（其余节点仍然可见），并且当我点击叶节点时也会导致问题。

如果有人知道展开和折叠节点的方法，请提供帮助。

编辑：伙计们，如果有人也知道简单多级树的解决方案，那也是一个好的开始...

【问题讨论】：

此问题与d3.js 无关，标签可能应该被删除。不过，如果您对 d3 感兴趣，cytoscape 看起来会产生 d3 会称为 force tree 的内容。

标签： javascript cytoscape.js cytoscape

【解决方案1】：

我替换了这行代码：

 restData: this.connectedEdges().targets().remove()

用这个：

restData: this.successors().targets().remove()

并且此代码现在折叠子节点和孙节点（仅在 3 个级别上测试过），并且叶节点在单击时不再折叠到其父节点中。

【讨论】：

我花了很多时间研究 l-boken 提供的解决方案——它适用于包含的数据，但不适用于导入的数据（后者：从 Cytoscape 导出的 .cyjs 文件，然后加载到 Cytoscape.js 中） .虽然导入的数据看起来，编程与提供的示例类似，但我无法解析这一行（以及下游依赖项）：var curNode = cy.$("#" + nodes[x].data.id);。问题中提供的代码+这个答案提供了一个简单的解决方案。
谢谢！这对我有用，但我如何让它在一开始就隐藏起来？现在，当它呈现时，它首先是可见的，只有在我单击它时才会隐藏。

【解决方案2】：

我找到了几个选项来实现这个效果。

使用删除和恢复。加载树时，存储节点的子节点。

var childrenData = new Map(); //holds nodes' children info for restoration
var nodes = elems.nodes
for(var x = 0; x < nodes.length; x++){
  var curNode = cy.$("#" + nodes[x].data.id);
  var id = curNode.data('id');
  //get its connectedEdges and connectedNodes
  var connectedEdges = curNode.connectedEdges(function(){
    //filter on connectedEdges
    return !curNode.target().anySame( curNode );
  });
  var connectedNodes = connectedEdges.targets();
  //and store that in childrenData
  //removed is true because all children are removed at the start of the graph
  childrenData.set(id, {data:connectedNodes.union(connectedEdges), removed: true}); 
}

然后可以在单击节点时删除和恢复此数据，类似于您的原始代码。我使用 Cytoscape 的图像折叠树演示作为示例的基础：jsfiddle

使用节点的显示属性。因为节点是隐藏的，没有被移除，所以它们连接的边和节点仍然可以访问，所以你不必预先存储数据。 p>

cy.on('tap', 'node', function(){
  //if the node's children have been hidden
  //getting the element at 1 because the element at 0 is the node itself
  //want to check if its children are hidden
  if (this.connectedEdges().targets()[1].style("display") == "none"){
    //show the nodes and edges
    this.connectedEdges().targets().style("display", "element");
  } else {
    //hide the children nodes and edges recursively
    this.successors().targets().style("display", "none");
  }
});

(jsfiddle)

GitHub 上还有一个名为 cytoscape.js-expand-collapse 的 Cytoscape 扩展。我没有亲自使用过它，但它的描述与您描述的功能相匹配：

Cytsocape.js 扩展，用于展开/折叠节点，以更好地管理复合图的复杂性

【讨论】：