example/click-to-focus/index.html

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

  <script src="//cdn.jsdelivr.net/npm/3d-force-graph"></script>
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
</head>

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

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

    const Graph = new ForceGraph3D(elem)
        .jsonUrl('../datasets/miserables.json')
        .nodeLabel('id')
        .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
          );
        });
  </script>
</body>