How to Zoom in a selected node in cytoscape

Question

I am new to javascript, and cytoscape as well. I want to generate a graph, (still hard coded)

1. Now I need to zoom a clicked node..
2. Also when a node is clicked, display a another graph

Appreciate your help

thank you

Answer 1

You can bind the click event on a node to cytoscape like this:

cy.bind('click ', 'node', function (evt) {
    var pos = cy.nodes("[id = " + evt.target.data().id + "]").position();
    cy.zoom({                       // Zoom to the specified position
      level: yourLevel,             // 0 <= yourLevel, maybe try out 1,2,3,4... and see what fits
      position: pos
    });
});

To display another graph, just do the same bind function and add the elements to the empty graph:

cy.bind('click', 'node', function (evt) {
    cy.remove(cy.elements());                 // remove elements and reset graph
    cy.reset();                               // graph is empty now
    cy.add(yourElements);                     // add new elements
    cy.elements().layout(yourLayout).run();   // give them a layout
});

At the end, you might want to cy.unbind() the bindings you have and bind them again, just to be sure you don't call these bind's multiple times.

Kind regards!