How to properly connect react and d3.js in a tree structure?

Question

JavaScript

There is a tree structure, I want each node to be some object from the point of view of d3 and from the point of view of react. I also want that when adding a node, the whole tree is scaled (if necessary).
Something like this structure: bl.ocks.org/mbostock/4339083, only that each node is a react object.
Only not a completely pure tree, a node can have two ancestors.

Answer 1

I was unable to get react to work fine with d3. I create D3 through componentDidMount and through ref I hook it to the div that I create with react, if you need to make changes like resize, then you have to recreate the entire react element with new props (not just render, but first replace with ' ', and then with ) otherwise it doesn't work .
The library itself normally works with events inside svg and additionally I use css features.
something like this...