Скрыть и показать дочерние узлы на узле Tap Cytoscape

Question

Я пытаюсь создать складную древовидную структуру в Cytoscape, используя более широкое расположение, чтобы реплицировать D3 collapsible tree.

Я пытаюсь повторить этот тип клика действия на узлах, но добавление восстановить функциональность в дополнении - Images & breadthfirst layout

Причины я выбрал 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 
     }); 
    } 
} 

Но это удается только для сворачивания и разворачивания его непосредственные дочерние узлы (остальные узлы все еще видны), а также вызывает проблема при нажатии на листовые узлы.

Если кто-то знает способ расширения и свернуть узел, пожалуйста, помогите.

Edit: Ребята, если кто-нибудь знает решение для простого многоуровневого дерева также, что было бы также быть хорошим началом ...

Answer 1

я заменил эту строку кода:

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

с этим один:

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

и этот код в настоящее время сворачивает дети и внуки узлов (тестировал только на 3-х уровнях) и листовые узлы не Lon когда щелкнуть.

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's Images collapsing tree demo в качестве основы для моего примера: 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. Существует также расширение Cytoscape на GitHub с именем cytoscape.js расширяющегося коллапсом. Я лично не использовал его, но его описание соответствует функциональности, которую вы описываете:

   A Cytsocape.расширение JS, чтобы развернуть/свернуть узлы для более эффективного управления сложности составных графиков