Interface TreeProps

Props accepted by the Tree component. data is the only required prop.

interface TreeProps {
    branchNodeClassName?: string;
    centeringTransitionDuration?: number;
    collapsible?: boolean;
    data: RawNodeDatum | RawNodeDatum[];
    dataKey?: string;
    depthFactor?: number;
    dimensions?: { height: number; width: number };
    draggable?: boolean;
    enableLegacyTransitions?: boolean;
    hasInteractiveNodes?: boolean;
    initialDepth?: number;
    leafNodeClassName?: string;
    nodeSize?: { x: number; y: number };
    onLinkClick?: TreeLinkEventCallback;
    onLinkMouseOut?: TreeLinkEventCallback;
    onLinkMouseOver?: TreeLinkEventCallback;
    onNodeClick?: TreeNodeEventCallback;
    onNodeMouseOut?: TreeNodeEventCallback;
    onNodeMouseOver?: TreeNodeEventCallback;
    onUpdate?: (
        target: { node: TreeNodeDatum; translate: Point; zoom: number },
    ) => any;
    orientation?: Orientation;
    pathClassFunc?: PathFunction;
    pathFunc?: PathFunctionOption | PathFunction;
    renderCustomNodeElement?: RenderCustomNodeElementFn;
    rootNodeClassName?: string;
    scaleExtent?: { max?: number; min?: number };
    separation?: { nonSiblings?: number; siblings?: number };
    shouldCollapseNeighborNodes?: boolean;
    svgClassName?: string;
    transitionDuration?: number;
    translate?: Point;
    zoom?: number;
    zoomable?: boolean;
}

Properties

branchNodeClassName? centeringTransitionDuration? collapsible? data dataKey? depthFactor? dimensions? draggable? enableLegacyTransitions? hasInteractiveNodes? initialDepth? leafNodeClassName? nodeSize? onLinkClick? onLinkMouseOut? onLinkMouseOver? onNodeClick? onNodeMouseOut? onNodeMouseOver? onUpdate? orientation? pathClassFunc? pathFunc? renderCustomNodeElement? rootNodeClassName? scaleExtent? separation? shouldCollapseNeighborNodes? svgClassName? transitionDuration? translate? zoom? zoomable?

Properties

OptionalbranchNodeClassName

branchNodeClassName?: string

Extra class names for nodes with children.

Default Value

''

OptionalcenteringTransitionDuration

centeringTransitionDuration?: number

The duration, in milliseconds, of the move that centers a clicked node. Needs TreeProps.dimensions.

Default Value

800

Optionalcollapsible

collapsible?: boolean

Whether nodes expand and collapse when clicked.

Default Value

true

data

data: RawNodeDatum | RawNodeDatum[]

The root node. Each node lists its child nodes in children. If you pass an array, Tree renders only its first element.

Tree gives each node element a unique id attribute, and each link data-source-id and data-target-id attributes.

OptionaldataKey

dataKey?: string

Identifies the tree that data describes. While dataKey stays the same, Tree ignores new data and keeps rendering its current tree, including nodes added with addChildren and which nodes are collapsed. To render new data, change dataKey or leave it unset; Tree then resets to the new data.

OptionaldepthFactor

depthFactor?: number

The distance, in pixels, between depth levels: each node sits at node.depth * depthFactor along the depth axis. A negative value reverses the tree's direction; 0 puts every node on the same level. If unset, TreeProps.nodeSize sets the distance.

Optionaldimensions

dimensions?: { height: number; width: number }

The width and height of the tree's container, for example from getBoundingClientRect(). If set, a clicked node moves to the center of the view.

Optionaldraggable

draggable?: boolean

Whether the user can drag the tree to pan it.

Default Value

true

OptionalenableLegacyTransitions

enableLegacyTransitions?: boolean

Animates nodes as they expand and collapse, using react-transition-group. Can slow down large trees.

Default Value

false

OptionalhasInteractiveNodes

hasInteractiveNodes?: boolean

Limits dragging and zooming to the tree's background, so that inputs and other controls inside nodes work. To drag or zoom from anywhere, hold Shift.

Default Value

false

OptionalinitialDepth

initialDepth?: number

Collapses every node at this depth or deeper on the first render. The root node has depth 0. If unset, every node starts expanded.

OptionalleafNodeClassName

leafNodeClassName?: string

Extra class names for nodes without children.

Default Value

''

OptionalnodeSize

nodeSize?: { x: number; y: number }

The space, in pixels, that each node takes up: x horizontally, y vertically.

Default Value

{ x: 140, y: 140 }

OptionalonLinkClick

onLinkClick?: TreeLinkEventCallback

Called with the link's source node, target node, and the event when a link is clicked.

OptionalonLinkMouseOut

onLinkMouseOut?: TreeLinkEventCallback

Called with the link's source node, target node, and the event when the pointer leaves a link.

OptionalonLinkMouseOver

onLinkMouseOver?: TreeLinkEventCallback

Called with the link's source node, target node, and the event when the pointer moves onto a link.

OptionalonNodeClick

onNodeClick?: TreeNodeEventCallback

Called with the node and the event when a node is clicked. The default node calls it on a click on its circle.

OptionalonNodeMouseOut

onNodeMouseOut?: TreeNodeEventCallback

Called with the node and the event when the pointer leaves a node.

OptionalonNodeMouseOver

onNodeMouseOver?: TreeNodeEventCallback

Called with the node and the event when the pointer moves onto a node.

OptionalonUpdate

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

Called after each zoom or pan, and after each update of the tree, such as a node toggle. node is the toggled node, or null if no node was toggled.

Optionalorientation

orientation?: Orientation

The direction in which the tree grows: horizontal grows left to right, vertical grows top to bottom. To reverse the direction, pass a negative TreeProps.depthFactor.

Default Value

'horizontal'

OptionalpathClassFunc

pathClassFunc?: PathFunction

Returns extra class names for a link. Tree calls it for each link with the link's TreeLinkDatum and the tree's orientation.

OptionalpathFunc

pathFunc?: PathFunctionOption | PathFunction

How links are drawn: one of the PathFunctionOption values, or a PathFunction that returns the link's SVG path. For the path syntax, see the d attribute.

Default Value

'diagonal'

OptionalrenderCustomNodeElement

renderCustomNodeElement?: RenderCustomNodeElementFn

Renders each node in place of the default node. Tree calls it with CustomNodeElementProps and renders the returned SVG element.

OptionalrootNodeClassName

rootNodeClassName?: string

Extra class names for the root node.

Default Value

''

OptionalscaleExtent

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

The smallest and largest zoom levels when TreeProps.zoomable is true.

Default Value

{ min: 0.1, max: 1 }

Optionalseparation

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

The space between neighboring nodes, as a multiple of TreeProps.nodeSize: siblings for nodes with the same parent, nonSiblings for nodes with different parents.

Default Value

{ siblings: 1, nonSiblings: 2 }

OptionalshouldCollapseNeighborNodes

shouldCollapseNeighborNodes?: boolean

Whether expanding a node collapses the other nodes at the same depth.

Default Value

false

OptionalsvgClassName

svgClassName?: string

Extra class names for the tree's svg element.

Default Value

''

OptionaltransitionDuration

transitionDuration?: number

The duration, in milliseconds, of the expand and collapse animation. Needs TreeProps.enableLegacyTransitions.

Default Value

500

Optionaltranslate

translate?: Point

Moves the tree along the x and y axes, in pixels. At { x: 0, y: 0 }, the root node sits in the top-left corner of the SVG.

Default Value

{ x: 0, y: 0 }

Optionalzoom

zoom?: number

The starting zoom level, limited to TreeProps.scaleExtent.

Default Value

1

Optionalzoomable

zoomable?: boolean

Whether the user can zoom the tree, within TreeProps.scaleExtent.

Default Value

true

Settings

Member Visibility

On This Page

Properties