• Public
  • Public/Protected
  • All

Interface TreeProps

Props accepted by the Tree component.

Default Props


  • TreeProps



Optional branchNodeClassName

branchNodeClassName: string

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

Default value

Optional centeringTransitionDuration

centeringTransitionDuration: number

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

Default value

Optional collapsible

collapsible: boolean

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

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.

Optional depthFactor

depthFactor: number

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

Default value

Optional dimensions

dimensions: { height: number; width: number }

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.

Type declaration

  • height: number
  • width: number

Optional enableLegacyTransitions

enableLegacyTransitions: boolean

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.

Default value

Optional hasInteractiveNodes

hasInteractiveNodes: boolean

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.

Default value

Optional initialDepth

initialDepth: number

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

By default, the tree renders to full depth.

Default value

Optional leafNodeClassName

leafNodeClassName: string

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

Default value

Optional nodeSize

nodeSize: { x: number; y: number }

The amount of space each node element occupies.

Default value

Type declaration

  • x: number
  • y: number

Optional onLinkClick

Called when a link is clicked.

Default value

Optional onLinkMouseOut

onLinkMouseOut: TreeLinkEventCallback

Called when mouse leaves the space belonging to a link.

Default value

Optional onLinkMouseOver

onLinkMouseOver: TreeLinkEventCallback

Called when mouse enters the space belonging to a link.

Default value

Optional onNodeClick

Called when a node is clicked.

Default value

Optional onNodeMouseOut

onNodeMouseOut: TreeNodeEventCallback

Called when mouse leaves the space belonging to a node.

Default value

Optional onNodeMouseOver

onNodeMouseOver: TreeNodeEventCallback

Called when mouse enters the space belonging to a node.

Default value

Optional onUpdate

onUpdate: (target: { node: TreeNodeDatum | null; translate: Point; zoom: number }) => any

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

Default value

Type declaration

Optional orientation

orientation: Orientation

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

Default value

Optional pathClassFunc

pathClassFunc: PathClassFunction

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.

Default value

Optional pathFunc

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

Default value

Optional renderCustomNodeElement

renderCustomNodeElement: RenderCustomNodeElementFn

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.

Default value

Optional rootNodeClassName

rootNodeClassName: string

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

Default value

Optional scaleExtent

scaleExtent: { max?: number; min?: number }

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

Default value

Type declaration

  • Optional max?: number
  • Optional min?: number

Optional separation

separation: { nonSiblings?: number; siblings?: number }

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

Default value

Type declaration

  • Optional nonSiblings?: number
  • Optional siblings?: number

Optional shouldCollapseNeighborNodes

shouldCollapseNeighborNodes: boolean

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

Default value

Optional svgClassName

svgClassName: string

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

Default value

Optional transitionDuration

transitionDuration: number

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

Default value

Optional translate

translate: Point

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.

Default value

Optional zoom

zoom: number

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

Default value

Optional zoomable

zoomable: boolean

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

Default value

Generated using TypeDoc