I keep encountering an error in the dev console whenever I attempt to run my code. The errors are as follows:
Error: missing: 1 3d-force-graph:5:22166
TypeError: r.attributes.position is undefine
You can view the live version of the faulty code here:
Here is the actual code snippet:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/3d-force-graph"></script>
<!--<script src="3d-force-graph.js"></script>-->
</head>
<body>
<div id="3d-graph"></div>
<script>
const elem = document.getElementById('3d-graph');
const Graph = ForceGraph3D()
(elem)
.graphData({"nodes":[{ "name": "Myriel","group": 1 },{ "name": "Napoleon","group": 1 }], links: [ { "source": 1, "target": 2, "value": 1 }]})
.nodeLabel('id')
.nodeAutoColorBy('group')
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.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>
This code is a modified version based on the following source code: https://github.com/vasturiano/3d-force-graph/blob/master/example/click-to-focus/index.html
The only change I made was replacing the jsonUrl method with static data input.
I have attempted debugging through the Dev Console but have been unable to resolve the issue.
Your assistance would be greatly appreciated.