react-force-graph icon indicating copy to clipboard operation
react-force-graph copied to clipboard

Search for node by node.id then can focus camera on that node

Open EncompassingResidential opened this issue 1 year ago • 0 comments

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

Rush band and Geddy Lee buttons

EncompassingResidential avatar May 26 '24 01:05 EncompassingResidential