2

I am currently using Cytoscape to create a large graph with 500 nodes. I am using Dagre for the hierarchical layout. Currently the graph is small on the screen because of number of nodes which makes sense but

Is there a way to focus on a single node once the graph is created. Or can I zoom in on a part of graph?

I have tried using animate filter on dagre but it animates the whole graph and does not focus or zoom in on one node or one part of the graph.

    this.cy
        .layout({
            name: "dagre",
            padding: 30,
            animate: true, // whether to transition the node positions
            animateFilter: function( node, i ){         
                if ( node[0]._private.data.type === "student") {
                    return true;
                }
            },
            transform: function( node, pos ){ return pos; },
        })
        .run();

Also tried zoom, But I only want to zoom one or set of nodes at the same time

cy.zoom({
        level: 1.1, // the zoom level
        //How can I filter the nodes I want?
      });
Learn AspNet
  • 1,192
  • 3
  • 34
  • 74
  • What you are asking for is called "marquee zoom". https://github.com/iVis-at-Bilkent/cytoscape.js-view-utilities does it. Maybe you can import this extension. Or you can directly take a look at the source codes. https://github.com/iVis-at-Bilkent/cytoscape.js-view-utilities/blob/96c057558889f31e7fb8d622139b2c783da90a77/src/view-utilities.js#L367 – canbax Jun 18 '21 at 05:20
  • @canbax Can you show an example - https://stackblitz.com/edit/cytoscape-call-method How would I zoom on the main parent when the graph loads. I tried it but doesn't work – Learn AspNet Jun 18 '21 at 12:30
  • @canbax I am trying to zoom the element whose type is view on the stackblitz – Learn AspNet Jun 18 '21 at 14:13
  • 1
    Does this answer your question? [cytoscape.js zoom to fit currently selected nodes](https://stackoverflow.com/questions/22975862/cytoscape-js-zoom-to-fit-currently-selected-nodes) – Stephan T. Jun 18 '21 at 14:39
  • 1
    @LearnAspNet getting elements is just easy like `cy.$('.view')` this code will get the elements with class `view`. What you need is more like what stephan says. If you want to use view-utils it is like https://stackblitz.com/edit/cytoscape-call-method-tyuj8c ctrl+shift DRAG mouse will make a marquee zoom – canbax Jun 18 '21 at 14:48
  • @StephanT. canbax Thank you guys, I can get the fit working https://stackblitz.com/edit/cytoscape-call-method-zyrh7v – Learn AspNet Jun 18 '21 at 14:51

0 Answers0