Allows for additional className(s) to be passed to all branch nodes (nodes with children).
Sets the time (in milliseconds) for the transition to center a node once clicked.
Determines whether the tree's nodes can collapse/expand.
The root node object, in which child nodes (also of type RawNodeDatum)
are recursively defined in the children key.
react-d3-tree will automatically attach a unique id attribute to each node in the DOM,
as well as data-source-id & data-target-id attributes to each link connecting two nodes.
Indicates the tree being represented by the data. If the dataKey changes, then we should re-render the tree. If the data changes but the dataKey keeps being the same, then it's a change (like adding children to a node) for the same tree, so we shouldn't re-render the tree.
Determines the spacing between parent & child nodes.
Tip: Negative values invert the tree's direction.
node.y = node.depth * depthFactor
Example: depthFactor: 0 renders all nodes on the same height (since node.y === 0 for all).
Enables the centering of nodes on click by providing the dimensions of the tree container,
e.g. via getBoundingClientRect().
If dimensions are given: node will center on click. If not, node will not center on click.
Toggles ability to drag the Tree.
Enables/disables legacy transitions using react-transition-group.
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.
Disables drag/pan/zoom D3 events when hovering over a node. Useful for cases where D3 events interfere when interacting with inputs or other interactive elements on a node.
Tip: Holding the Shift key while hovering over a node re-enables the D3 events.
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.
Determines along which axis the tree is oriented.
horizontal - Tree expands along x-axis (left-to-right).
vertical - Tree expands along y-axis (top-to-bottom).
Additionally, passing a negative value to depthFactor will invert the tree's direction (i.e. right-to-left, bottom-to-top).
Allows for additional className(s) to be passed to links.
Each link calls pathClassFunc with its own TreeLinkDatum and the tree's current orientation.
Expects a className string to be returned.
See the PathClassFunction type for more information.
The draw function (or d) used to render path/link elements. Accepts a predefined
PathFunctionOption or a user-defined PathFunction.
See the 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 ReactElement.
See the 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.
Requires enableLegacyTransition to be true.
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 scaleExtent.
Toggles ability to zoom in/out on the Tree by scaling it according to scaleExtent.
Generated using TypeDoc
Props accepted by the
Treecomponent.Default Props