| 12345678910111213141516171819202122232425262728293031 |
- <head>
- <style> body { margin: 0; } </style>
- <script src="//unpkg.com/three"></script>
- <script src="//unpkg.com/three-spritetext"></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>
- const Graph = ForceGraph3D()
- (document.getElementById('3d-graph'))
- .jsonUrl('../datasets/miserables.json')
- .nodeAutoColorBy('group')
- .nodeThreeObject(node => {
- const sprite = new SpriteText(node.id);
- sprite.material.depthWrite = false; // make sprite background transparent
- sprite.color = node.color;
- sprite.textHeight = 8;
- return sprite;
- });
- // Spread nodes a little wider
- Graph.d3Force('charge').strength(-120);
- </script>
- </body>
|
