this iteration makes the code nice to work with
the original example from https://github.com/vasturiano/react-force-graph/blob/master/example/all-modes/index.html
<head>
<style> body { margin: 0; } </style>
<script src='//unpkg.com/react@16/umd/react.production.min.js'></script>
<script src='//unpkg.com/react-dom@16/umd/react-dom.production.min.js'></script>
<script src='//unpkg.com/babel-standalone'></script>
<script src='//unpkg.com/react-force-graph'></script>
<!--<script src='react-force-graph.js'></script>-->
<script src='random-data.js'></script>
</head>
<body>
<div id='graph'></div>
<script src='vis.jsx' type='text/jsx'>
</script>
</body>function genRandomTree(N = 300) {
return {
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => ({
source: id,
target: Math.round(Math.random() * (id-1))
}))
};
}const comps = [
ForceGraph.ForceGraph2D,
ForceGraph.ForceGraph3D,
ForceGraph.ForceGraphVR
]
const compWidth = window.innerWidth / comps.length
ReactDOM.render(
<div style={{ display: 'flex' }}>
{comps.map(Comp => <Comp width={compWidth} graphData={genRandomTree()} />)}
</div>,
document.getElementById('graph')
)