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

[Slechani]

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]

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]

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]

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.