| 123456789101112131415161718192021222324252627282930313233343536 |
- <head>
- <style> body { margin: 30px; } </style>
- <script src="//unpkg.com/element-resize-detector/dist/element-resize-detector.min.js"></script>
- <script src="//unpkg.com/3d-force-graph"></script>
- <!-- <script src="../../dist/3d-force-graph.js"></script>-->
- </head>
- <body>
- <div id="3d-graph"></div>
- <script>
- // Random tree
- const N = 300;
- const gData = {
- 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 Graph = ForceGraph3D()
- (document.getElementById('3d-graph'))
- .height(window.innerHeight - 60)
- .graphData(gData);
- elementResizeDetectorMaker().listenTo(
- document.getElementById('3d-graph'),
- el => Graph.width(el.offsetWidth)
- );
- </script>
- </body>
|
