Center a specific node into a scene with 3d-force-graph

Question

I am new in d3. I am using 3d-force-graph and I want to find a specific node and get its position ( x, y, z, vx, vy, vz ). My goal is to center a specific node into the scene when page is loaded. I also want to clone the node object and make it global - so that other function can use it.

I am using a json file.

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

<script>
const elem = document.getElementById('3d-graph');
const Graph = ForceGraph3D()
      (elem)
        .jsonUrl('package3.json')
        .onNodeClick(node => {
            console.log(node.id);
        });
</script>

<!--package3.json file-->
{
  "nodes": [
    {"id": "Marius", "group": 2},
    {"id": "BaronessT", "group": 1},
    {"id": "Mabeuf", "group": 1},
    {"id": "Enjolras", "group": 2}
  ],
  "links": [
    {"source": "Marius", "target": "Myriel", "value": 1},
    {"source": "BaronessT", "target": "Mabeuf", "value": 5},
    {"source": "Mabeuf", "target": "BaronessT", "value": 6},
    {"source": "Enjolras", "target": "Marius", "value": 2}
  ]
}

How to select node with id="Mabeuf" and set it center focus of the camera in scene.

Answer 1

set it center focus of the camera in scene

https://github.com/vasturiano/3d-force-graph/blob/master/example/click-to-focus/index.html

// 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
);