How to hide cytoscape nodes when graph is ready/rendered?

Question

I want to hide all the successors of the parent when the graph renders and show when tapped. But the code I have shows the nodes in the beginning and hides/shows when I tap the parent(got it from another question posted here).

var parentArray = ["2", "6", "8", "9"];

for(var i=0; i < parentArray.length; ++i) {
    cy.on('tap', '[id = \"' + parentArray[i] + '\"]' , function() {
        if (this.scratch().restData == null) {
            this.scratch({
                restData: this.successors().targets().remove()
            });                    
        } else {
            this.scratch().restData.restore();
            this.scratch({
                estData: null
            });
        }
    });
}

How do I hide all the successors in the beginning?

Answer 1

If you use classes, you don't have to remove the nodes. I used a dagre graph with 3 DAGs, in the cy.ready callback, I defined some parent nodes and added the hidden class to all of their successors. Later, you just have to remove that class to display the graph again, though the layout may need to be rerun, not sure about that. Here is my code:

 var cy = (window.cy = cytoscape({ container: document.getElementById("cy"), boxSelectionEnabled: false, autounselectify: true, style: [{ selector: "node", css: { content: "data(id)", "text-valign": "center", "text-halign": "center", height: "60px", width: "60px", "border-color": "black", "border-opacity": "1", "border-width": "10px" } }, { selector: "$node > node", css: { "padding-top": "10px", "padding-left": "10px", "padding-bottom": "10px", "padding-right": "10px", "text-valign": "top", "text-halign": "center", "background-color": "#bbb" } }, { selector: "edge", css: { "target-arrow-shape": "triangle" } }, { selector: ":selected", css: { "background-color": "black", "line-color": "black", "target-arrow-color": "black", "source-arrow-color": "black" } }, { selector: ".hidden", css: { "display": "none" } } ], elements: { nodes: [{ data: { id: "n0" } }, { data: { id: "n1" } }, { data: { id: "n2" } }, { data: { id: "n3" } }, { data: { id: "n4" } }, { data: { id: "n5" } }, { data: { id: "n6" } }, { data: { id: "n7" } }, { data: { id: "n8" } }, { data: { id: "n9" } }, { data: { id: "n10" } }, { data: { id: "n11" } }, { data: { id: "n12" } }, { data: { id: "n13" } }, { data: { id: "n14" } }, { data: { id: "n15" } }, { data: { id: "n16" } } ], edges: [{ data: { source: "n0", target: "n1" } }, { data: { source: "n1", target: "n2" } }, { data: { source: "n1", target: "n3" } }, { data: { source: "n2", target: "n7" } }, //{ data: { source: "n2", target: "n11" } }, { data: { source: "n2", target: "n16" } }, //{ data: { source: "n3", target: "n4" } }, { data: { source: "n3", target: "n16" } }, { data: { source: "n4", target: "n5" } }, { data: { source: "n4", target: "n6" } }, { data: { source: "n6", target: "n8" } }, { data: { source: "n8", target: "n9" } }, { data: { source: "n8", target: "n10" } }, { data: { source: "n11", target: "n12" } }, { data: { source: "n12", target: "n13" } }, { data: { source: "n13", target: "n14" } }, { data: { source: "n13", target: "n15" } } ] }, layout: { name: "dagre", padding: 5 } })); cy.ready(function() { let parentNodeIds = ['n0', 'n4', 'n11'] for (id in parentNodeIds) { cy.nodes(`#${parentNodeIds[id]}`).successors().targets().classes('hidden') } }) cy.off("click"); cy.on("click", function() { cy.$('.hidden').removeClass('hidden') });

 body { font: 14px helvetica neue, helvetica, arial, sans-serif; } #cy { height: 100%; width: 75%; position: absolute; left: 0; top: 0; float: left; }

 <html> <head> <meta charset=utf-8 /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"> <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script> <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script> <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script> <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script> </head> <body> <div id="cy"></div> </body> </html>

How to hide cytoscape nodes when graph is ready/rendered?

Question

1 answers

solution1
2 2021-07-28 11:33:34

How to hide cytoscape nodes when graph is ready/rendered?

Question

1 answers

solution1 2 2021-07-28 11:33:34

solution1
2 2021-07-28 11:33:34