6

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

我正在尝试在节点上复制这种类型的单击操作，但还添加了恢复功能 -图像和广度优先布局

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

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

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

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

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

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

4

2 回答 2

5

我替换了这行代码：

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

有了这个：

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

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

于 2017-05-25T13:22:29.657 回答
3

我找到了一些实现这种效果的选择。

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

    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

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

    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）

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

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

于 2017-07-17T17:14:25.467 回答