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
border: no | |
height: 960 | |
license: MIT | |
title: "react-force-graph all modes, generated data" |
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') | |
) |