CODEWITHSUNDEEP
reactjsvis.jsreact-graph-vis
Jose Peres
Jose Peres

Reputation: 317

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

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:

enter image description here

And I want it to look like this:

enter image description here

How can I achieve this on React?

Thanks in advance

Upvotes: 3

Views: 2346

Answers (2)

Shivayan Mukherjee
Shivayan Mukherjee

Reputation: 827

You can use the 'navigationButtons' attribute of the property 'interaction' to place zoom in/out buttons

Upvotes: 0

R. AbuBaker
R. AbuBaker

Reputation: 226

You need to call the fit function inside of the stabilized event.

Declare events object and define stabilized:

const events = {
    stabilized: () => {
            if (network) { // Network will be set using getNetwork event from the Graph component
                network.setOptions({ physics: false }); // Disable physics after stabilization
                network.fit();
            }
        }
    };

and this is how you define the Graph component:

<Graph
        graph={graph}
        options={options}
        events={events}
        getNetwork={network => {
         setNetwork(network);
        }}
    />

Upvotes: 1

Related Questions