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

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

Open mgroma opened 1 year ago

mgroma commented 1 year 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 1 year 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