bkrem / react-d3-tree

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

[question] Default tree is not centered and nodes are cut off #476

Open mgroma opened 10 months ago

mgroma commented 10 months ago

I used the default example from the "Usage" section. Is it expected that the root node shows up in the top left corner and other nodes are cut off - see the image? I'm using the latest version.

image

If so, is there an option to center the root node and automatically zoom out to fit all nodes?

cabbagetom commented 10 months ago

@mgroma. To answer the first part of your question, there is a TreeProp called translate which translates the graph along the x/y axis by the specified amount of pixels. If you set up some code like the following, you can then set the prop value to treeContainerDimensions.width and .height/2 to ensure that it is always centred in all viewports. const dimensions = treeContainer.getBoundingClientRect(); setTreeContainerDimensions({ width: dimensions.width, height: dimensions.height, }); Regarding the second part on zooming out, sorry don't know enough about what is going on under the hood to answer this