react-force-graph
react-force-graph copied to clipboard
Search for node by node.id then can focus camera on that node
Is your feature request related to a problem? Please describe.
Hi Vasco Asturiano,
Not a problem, new feature.
Murphy's law, not 3 minutes after I created this issue I find this one: https://github.com/vasturiano/react-force-graph/issues/470
Which I think is what I want... let me test...
Yes Yes Rush Rush that worked. Phew. Glad you answered Issue 470 !
Describe the solution you'd like
I label all my nodes.
I want to focus on a node with a specific label.
I have buttons, such as a music band "Rush (band)" Button.
- When "Rush (band)" button is pushed,
- I want to search the the graph's nodes for the node labeled "Rush (band)"
- Then I'll use the cameraPosition() to focus on the "Rush (band)" node
Describe alternatives you've considered
Now showing correct answer:
const focusOnNode = (searchString) => {
const myGraphData = fgRef.current.graphData();
const node = myGraphData.nodes.find(n => n.id === searchString);
if (node) {
const distance = 40; // Distance from the node to position the camera
const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
fgRef.current.cameraPosition(
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
node, // lookAt target
3000 // ms transition duration
);
}
};
useEffect(() => {
if (focusNodeId) {
focusOnNode(focusNodeId);
}
}, [focusNodeId]);
Additional context
https://bandtree.fly.dev