Cant align center cytoscape graph

Question

I want to align my cytoscape graph on the center of the canvass, can anyone help? This is the result i get:

Heres my layout code:

var cy = window.cy = cytoscape({
                // Contenedor
                container: document.getElementById('graficaCytoscape'),
                // Layout
                layout: {
                    name: 'cose',
                    idealEdgeLength: 100,
                    nodeOverlap: 20,
                    refresh: 20,
                    padding: 30,
                    randomize: false,
                    componentSpacing: 100,
                    nodeRepulsion: 400000,
                    edgeElasticity: 100,
                    nestingFactor: 5,
                    gravity: 80,
                    numIter: 1000,
                    initialTemp: 200,
                    coolingFactor: 0.95,
                    minTemp: 1.0

                },
                // Styles
                style: [{
                    "selector": "node",
                    "style": {
                        
                        "width": "mapData(score, 0, 25, 30, 70)",
                        "height": "mapData(score, 0, 25, 30, 70)",
                        "content": "data(name)",
                        "font-size": "12px",
                        "background-color": "#c2c2c2",
                        "text-outline-color": "#555",
                        "text-outline-width": "2px",
                        "color": "#fff",
                        "overlay-padding": "6px",
                        "z-index": "10"
                    }
                }, {
                    "selector": "edge",
                    "style": {
                        "curve-style": "haystack",
                        "haystack-radius": "0.5",
                        "opacity": "0.4",
                        "line-color": "#EC0000",
                        "width": "mapData(weight, 0, 1, 1, 8)",
                        "overlay-padding": "3px"
                    }
                }],
                // Data
                elements: data
            });

So what i need is that the graph goes to the center of its container. I think its a easy question but i never worked before with cytoescape and im stucked in this. Thanks.

Answer 1

You may try to use cy.center() when you in .js file while rendering your graph.

Cytoscape.js documentation: https://js.cytoscape.org/#cy.center

You can try to add cy.center() in script.js file to see the effect in this example: http://embed.plnkr.co/O7mWEfZuIhhtahdAhsAM/

Alternatively, from your code, you can also try to add cy.center() at the end of the cy variable declaration.

Answer 2

At last i could do it with: pan: { x: 400, y: 100 },