Expand and Collapse
Pro
Interactive example to demonstrate how you can navigate hierarchical data structures. You can click on a node to toggle its child nodes and animate the layout changes.
This is a Pro example. Get all pro examples, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.
About this Pro Example
- Once subscribed, you'll get access to two different versions of this example: One using d3-hierarchy (opens in a new tab) and the other one using dagre.js (opens in a new tab) as a layout engine.
- The animation can be switched off easily and is implemented using d3-timer (opens in a new tab)
- Dependencies: reactflow (opens in a new tab), d3-hierarchy (opens in a new tab), d3-timer (opens in a new tab)