zengzheng
/
CDSS-daming-web


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

  <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 elem = document.getElementById('3d-graph');

    const Graph = 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);

          Graph.cameraPosition(
            { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
            node, // lookAt ({ x, y, z })
            3000  // ms transition duration
          );
        });
  </script>
</body>