search

bkrem / react-d3-tree

:deciduous_tree: React component to create interactive D3 tree graphs
https://bkrem.github.io/react-d3-tree
MIT License
1.09k stars 270 forks source link

How to get the position of a node to translate the camera to it ? #399

Open Slechani opened 2 years ago

Slechani commented 2 years ago

Hi, i currently have an input where the user can select from multiple strings (each string is the name of a node in the graph), I would like for the graph to zoom to the target node each time the user changes the select value.

I was able to do every step up until the translation, I understand that I need to use the translate prop but I don't know how to "find" the node by its name and how to find the position of the node once I found it.

Does someone know how to find the position of a node in the graph ?

Thanks in advance

kobiakov commented 1 year ago

It's probably no longer relevant, but whoever comes across the same question, it is totally possible. :)

The trick is:

  1. To provide a custom render function via renderCustomNodeElement.
  2. With that, you get access to CustomNodeElementProps for each node. The property hierarchyPointNode contains the (relative) coordinates of the currently rendered node.
  3. Pass a callback to the render function, and invoke it when a relevant node is rendered. Via the callback itself, you can mutate the state of the component containing the tree and, by that, control translation.

Hope this helps.

austingregory-git commented 1 year ago

Hey @kobiakov, Thank you for this. Any chance you have a specific example of this? I can't seem to get it to work.

Ranjith-3i commented 1 year ago

hey @kobiakov , i'm using "react-d3-tree": "^3.6.1" cant find a property called hierarchyPointNode . I can't seem to get it to work.