ノードタップCytoscapeの子ノードを非表示にする

Question

D3 collapsible treeを複製するために、breadthfirstレイアウトを使用してCytoscapeで折りたたみ可能なツリー構造を作成しようとしています。 Images & breadthfirst layout

私は木が1以上でのノードを持つことになり、シナリオがあったので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 
     }); 
    } 
} 

をしかし、これが唯一のその直接の子ノード（ノードの残りはまだ表示されている）とも原因が崩壊し、拡大することに成功しています葉ノードをタップすると問題が発生します。

誰かがノードを展開して折り畳む方法を知っている場合は、助けてください。

編集：みんな、誰もが、私はこのコード行置き換えも良いスタートとなり、単純なマルチレベル木のためのソリューション、...

Answer 1

知っている場合：

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

を

このコードでは、子ノードと孫ノード（3つのレベルでのみテストされています）と葉ノードは孤立していませんgerはクリックされると親に崩壊する。

Answer 2

私はこの効果を達成するためにいくつかのオプションを見つけました。

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の拡張はcytoscape.js-拡大-崩壊名前でもあります。私は個人的には使用していませんが、その説明はあなたが記述する機能と一致しています：

   CytsocapeJSの拡張機能は、複合グラフ