Interface TreeProps

Allows for additional className(s) to be passed to all branch nodes (nodes with children).

Tree.defaultProps.branchNodeClassName | Default value

Sets the time (in milliseconds) for the transition to center a node once clicked.

Tree.defaultProps.centeringTransitionDuration | Default value

Determines whether the tree's nodes can collapse/expand.

Tree.defaultProps.collapsible | Default value

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.

Tree.defaultProps.dataKey | Default value

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).

Tree.defaultProps.depthFactor | Default value

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.

Tree.defaultProps.draggable | Default value

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.

Tree.defaultProps.enableLegacyTransitions | Default value

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.

Tree.defaultProps.hasInteractiveNodes | Default value

Sets the maximum node depth to which the tree is expanded on its initial render.

By default, the tree renders to full depth.

Tree.defaultProps.initialDepth | Default value

Allows for additional className(s) to be passed to all leaf nodes (nodes without children).

Tree.defaultProps.leafNodeClassName | Default value

The amount of space each node element occupies.

Tree.defaultProps.nodeSize | Default value

Called when a link is clicked.

Tree.defaultProps.onLinkClick | Default value

Called when mouse leaves the space belonging to a link.

Tree.defaultProps.onLinkMouseOut | Default value

Called when mouse enters the space belonging to a link.

Tree.defaultProps.onLinkMouseOver | Default value

Called when a node is clicked.

Tree.defaultProps.onNodeClick | Default value

Called when mouse leaves the space belonging to a node.

Tree.defaultProps.onNodeMouseOut | Default value

Called when mouse enters the space belonging to a node.

Tree.defaultProps.onNodeMouseOver | Default value

Called when the inner D3 component updates. That is - on every zoom or translate event, or when tree branches are toggled.

Tree.defaultProps.onUpdate | Default value

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).

Tree.defaultProps.orientation | Default value

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.

Tree.defaultProps.pathClassFunc | Default value

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

Tree.defaultProps.pathFunc | Default value

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.

Tree.defaultProps.renderCustomNodeElement | Default value

Allows for additional className(s) to be passed to the root node.

Tree.defaultProps.rootNodeClassName | Default value

Sets the minimum/maximum extent to which the tree can be scaled if zoomable is true.

Tree.defaultProps.scaleExtent | Default value

Sets separation between neighboring nodes, differentiating between siblings (same parent node) and non-siblings.

Tree.defaultProps.separation | Default value

If a node is currently being expanded, all other nodes at the same depth will be collapsed.

Tree.defaultProps.shouldCollapseNeighborNodes | Default value

Allows for additional className(s) to be passed to the svg element wrapping the tree.

Tree.defaultProps.svgClassName | Default value

Sets the animation duration (in milliseconds) of each expansion/collapse of a tree node. Requires enableLegacyTransition to be true.

Tree.defaultProps.transitionDuration | Default value

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.

Tree.defaultProps.translate | Default value

A floating point number to set the initial zoom level. It is constrained by scaleExtent.

Tree.defaultProps.zoom | Default value

Toggles ability to zoom in/out on the Tree by scaling it according to scaleExtent.

Tree.defaultProps.zoomable | Default value