how do I render a vis.js network into a concrete html container?
I've tried the following, however it does not work:
<div id="network">
{new vis.Network("network", data, options)}
</div>
Or should I render it the following way?
ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(<Network />, document.getElementById('network'));
While the elements "app" and "network" are in a wrapper html container.
I would appreciate a solution that the vis.js network is rendered into the root document:
ReactDOM.render(<App />, document.getElementById('root'));
Cheers!
Here is the modern Typescript way:
import React, { useEffect, useRef } from "react";
import {
DataSet,
Network,
Options,
Data,
} from "vis-network/standalone/esm/vis-network";
export const LogicTreePanel = () => {
// A reference to the div rendered by this component
const domNode = useRef<HTMLDivElement>(null);
// A reference to the vis network instance
const network = useRef<Network | null>(null);
// An array of nodes
const nodes = new DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" },
]);
// An array of edges
const edges = new DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
]);
const data: Data = {
nodes,
edges,
};
const options: Options = {};
useEffect(() => {
if (domNode.current) {
network.current = new Network(domNode.current, data, options);
}
}, [domNode, network, data, options]);
return (
<div
ref={domNode}
/>
);
};
Here is a modern example using functional components and React hooks.
package.json
{
"dependencies": {
"react": "16.13.0",
"react-dom": "16.13.0",
"vis-network": "7.4.0"
}
}
VisNetwork.js
import React, { useEffect, useRef } from 'react';
import { DataSet, Network} from 'vis-network/standalone/esm/vis-network';
const VisNetwork = () => {
// A reference to the div rendered by this component
const domNode = useRef(null);
// A reference to the vis network instance
const network = useRef(null);
// An array of nodes
const nodes = new DataSet([
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2' },
{ id: 3, label: 'Node 3' },
{ id: 4, label: 'Node 4' },
{ id: 5, label: 'Node 5' }
]);
// An array of edges
const edges = new DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]);
const data = {
nodes,
edges
};
const options = {};
useEffect(
() => {
network.current = new Network(domNode.current, data, options);
},
[domNode, network, data, options]
);
return (
<div ref = { domNode } />
);
};
export default VisNetwork;
this works for me:
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
var data = {
nodes: nodes,
edges: edges
};
var options = {};
// initialize your network!
var VisNetwork = React.createClass({
componentDidMount(){
var network = new vis.Network(this.refs.myRef, data, options);
},
render: function() {
return <div ref="myRef"></div>;
}
});
ReactDOM.render(
<VisNetwork />,
document.getElementById('container')
);
https://jsfiddle.net/ginollerena/69z2wepo/63263/
From React 16.3, it is recommended to use React.createRef
Docs
Updating @Gino's answer with 16.3 style.
import { DataSet, Network } from 'vis';
import React, { Component, createRef } from "react";
const nodes = new DataSet([
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2' },
{ id: 3, label: 'Node 3' },
{ id: 4, label: 'Node 4' },
{ id: 5, label: 'Node 5' }
]);
// create an array with edges
const edges = new DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]);
const data = {
nodes: nodes,
edges: edges
};
const options = {};
// initialize your network!
class VisNetwork extends Component {
constructor() {
super();
this.network = {};
this.appRef = createRef();
}
componentDidMount() {
this.network = new Network(this.appRef.current, data, options);
}
render() {
return (
<div ref={this.appRef} />
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With