crubier / react-graph-vis

A react component to render nice graphs using vis.js

Home Page:http://crubier.github.io/react-graph-vis/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to fit or zoom out a React Vis.JS Network Graph?

TiberiusVE opened this issue · comments

Good evening, I have the following setting for my Network Graph:

const exceptionsGraph = {
        nodes: graph,
        edges: edges
    }

// Graph Options
const options = {
    height: "80%",
    width: "100%",
    nodes: {
        shape: "dot",
        size: 16
    },
    layout: {
        hierarchical: false
    },
    physics: {
        forceAtlas2Based: {
            gravitationalConstant: -26,
            centralGravity: 0.005,
            springLength: 230,
            springConstant: 0.18,
        },
        maxVelocity: 146,
        solver: "forceAtlas2Based",
        timestep: 0.35,
        stabilization: {
            enabled: true,
            iterations: 2000,
            updateInterval: 25,
        },
    },
    edges: {
        color: "#abb4be"
    }
}    

And then I call it like this:

<Graph graph={exceptionsGraph} options={options} />
But when it renders it's all zoomed in, so it looks terrible. Like this:

image

And I want it to look like this:

image

How can I achieve this on React?

Thanks in advance

Have you tried calling the fit() method from the network reference?

This should work indeed