35 lines
1 KiB
HTML
Executable file
35 lines
1 KiB
HTML
Executable file
<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);
|
|
|
|
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>
|