index3D.html

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/3d-force-graph"></script>
  <!--<script type="module" src="../../src/3d-force-graph.js"></script>-->
</head>

<body>
  <div id="3d-graph"></div>


  <script>
    const elem = document.getElementById('3d-graph');

    const Graph = ForceGraph3D()
    (elem)
            .jsonUrl('http://localhost:8080/json')
            .nodeLabel('description')
            .nodeAutoColorBy('group')
            .onNodeClick(node => {
              // Aim at node from outside it
              const distance = 40;
              const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);

              const newPos = node.x || node.y || node.z
                      ? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
                      : { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)

              Graph.cameraPosition(
                      newPos, // new position
                      node, // lookAt ({ x, y, z })
                      3000  // ms transition duration
              );
            })

            // отвечает за то что узел при перетаскивании останется на том же месте, не будет возвращаться
            .onNodeDragEnd(node => {
              node.fx = node.x;
              node.fy = node.y;
              node.fz = node.z;
            })
            .linkDirectionalParticles(2); // бегунки по ребрам
  </script>
</body>