Closed NilsBaumgartner1994 closed 1 year ago
I face a bug, where i can only drag nodes horizontally but not in the other directions?
import React, {FunctionComponent} from 'react'; import {Menubar} from 'primereact/menubar'; import Graph from "react-graph-vis"; // @ts-ignore export interface DataClumpsGraphProps { dataClumpsDict: any } export const DataClumpsGraph : FunctionComponent<DataClumpsGraphProps> = (props: DataClumpsGraphProps) => { function renderGraph(){ const graph = { nodes: [ { id: 1, label: "Node 1", title: "node 1 tootip text" }, { id: 2, label: "Node 2", title: "node 2 tootip text" }, { id: 3, label: "Node 3", title: "node 3 tootip text" }, { id: 4, label: "Node 4", title: "node 4 tootip text" }, { id: 5, label: "Node 5", title: "node 5 tootip text" } ], edges: [ { from: 1, to: 2 }, { from: 1, to: 3 }, { from: 2, to: 4 }, { from: 2, to: 5 } ] }; const physics = { solver: "forceAtlas2Based", forceAtlas2Based: { gravitationalConstant: -200, centralGravity: 0.02, springLength: 75, springConstant: 0.08, damping: 0.4, avoidOverlap: 0.5 } }; const options = { layout: { hierarchical: true }, edges: { color: "#000000" }, autoResize: true, physics: physics, height: "300px", width: "300px" }; const events = { select: function(event) { var { nodes, edges } = event; } }; return ( <Graph graph={graph} options={options} events={events} getNetwork={network => { // if you want access to vis.js network api you can set the state in a parent component using this property }} /> ); } return( <div style={{height: "300px", width: "300px", backgroundColor: "orange"}}> <div style={{height: "300px", width: "300px"}} > {renderGraph()} </div> </div> ) }
You just need to change hierarchical:true to hierarchical: false in the option object
hierarchical:true
hierarchical: false
I face a bug, where i can only drag nodes horizontally but not in the other directions?