Masquer et afficher les nœuds enfants sur le nœud Tapez sur Cytoscape

Question

J'essaie de créer une arborescence repliable dans Cytoscape en utilisant la mise en page breadthfirst, pour répliquer le D3 collapsible tree.

Je suis en train de reproduire ce type d'action de clic sur les nœuds, mais en ajoutant fonctionnalité de restauration en plus - Images & breadthfirst layout

La raison pour laquelle j'ai choisi Cytoscape est parce que j'avais un scénario dans lequel l'arbre aurait des noeuds avec plus de 1 parent.

J'ai essayé d'ajouter un événement du robinet en utilisant le code suivant:

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

Mais, ce ne réussit que pour réduire et développer ses nœuds enfants immédiats (reste des nœuds sont encore visibles) et provoque également problème quand je tape sur les nœuds feuilles.

Si quelqu'un connaît un moyen d'étendre et de réduire un nœud, aidez-nous.

Modifier: Les gars, si quelqu'un connaît la solution pour un simple arbre à plusieurs niveaux aussi, qui serait également un bon début ...

Answer 1

J'ai remplacé cette ligne de code:

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

avec celui-ci:

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

et ce code s'effondre maintenant nœuds enfants et petits-enfants (testé uniquement sur 3 niveaux) et des noeuds de feuilles non LON ger s'effondrer dans leur parent quand on clique dessus.

Answer 2

J'ai trouvé quelques options pour réaliser cet effet.

1. Utilisation de remove et restore. Lorsque l'arborescence est chargée, les enfants des nœuds sont stockés. Ces données peuvent ensuite être supprimées et restaurées sur un clic de nœud, similaire à votre code d'origine. J'ai utilisé la démo de l'arborescence de Cytoscape comme base de mon exemple: jsfiddle

2. Utilisation de l'attribut d'affichage d'un nœud. Étant donné que les nœuds sont masqués et non supprimés, leurs tronçons et nœuds connectés sont toujours accessibles. Vous n'avez donc pas besoin de stocker les données au préalable.

   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. Il y a aussi une expansion Cytoscape sur GitHub avec le nom cytoscape.js-expand-effondrement. Je ne l'ai pas personnellement utilisé, mais sa description correspond à la fonctionnalité que vous décrivez:

   A Cytsocape.l'extension js pour étendre/nœuds d'effondrement pour une meilleure gestion de la complexité des graphiques composés