Props accepted by the
Allows for additional className(s) to be passed to all branch nodes (nodes with children).
Determines whether the tree's nodes can collapse/expand.
The root node object, in which child nodes (also of type
are recursively defined in the
react-d3-tree will automatically attach a unique
id attribute to each node in the DOM,
as well as
data-target-id attributes to each link connecting two nodes.
Determines the spacing between parent & child nodes.
Tip: Negative values invert the tree's direction.
node.y = node.depth * depthFactor
depthFactor: 0 renders all nodes on the same height (since node.y === 0 for all).
Enables/disables legacy transitions using
Note: This flag is considered legacy and usage is discouraged for large trees, as responsiveness may suffer.
enableLegacyTransitions will be deprecated once a suitable
replacement for transitions has been found.
Sets the maximum node depth to which the tree is expanded on its initial render.
By default, the tree renders to full depth.
Allows for additional className(s) to be passed to all leaf nodes (nodes without children).
The amount of space each node element occupies.
Called when a link is clicked.
Called when mouse leaves the space belonging to a link.
Called when mouse enters the space belonging to a link.
Called when a node is clicked.
Called when mouse leaves the space belonging to a node.
Called when mouse enters the space belonging to a node.
Called when the inner D3 component updates. That is - on every zoom or translate event, or when tree branches are toggled.
Allows for additional className(s) to be passed to links.
Each link calls
pathClassFunc with its own
TreeLinkDatum and the tree's current
className string to be returned.
PathClassFunction type for more information.
The draw function (or
d) used to render
link elements. Accepts a predefined
PathFunctionOption or a user-defined
PathFunction type for more information.
For details on draw functions, see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
Custom render function that will be used for every node in the tree.
The function is passed
CustomNodeElementProps as its first argument.
react-d3-tree expects the function to return a
RenderCustomNodeElementFn type for more details.
Allows for additional className(s) to be passed to the root node.
Sets the minimum/maximum extent to which the tree can be scaled if
zoomable is true.
Sets separation between neighboring nodes, differentiating between siblings (same parent node) and non-siblings.
If a node is currently being expanded, all other nodes at the same depth will be collapsed.
Allows for additional className(s) to be passed to the
svg element wrapping the tree.
Sets the animation duration (in milliseconds) of each expansion/collapse of a tree node.
enableLegacyTransition to be
Translates the graph along the x/y axis by the specified amount of pixels.
By default, the graph will render in the top-left corner of the SVG canvas.
A floating point number to set the initial zoom level. It is constrained by
Toggles ability to zoom in/out on the Tree by scaling it according to
Generated using TypeDoc