展開と折りたたみ

Pro

階層データ構造をどのようにナビゲートできるかを示すインタラクティブなサンプルです。ノードをクリックして子ノードを切り替え、レイアウトの変更をアニメーション化できます。

これはProのサンプルです。 すべてのProのサンプル、xyflowチームからの1対1のサポート、React Flow Proサブスクリプションによる優先順位の高いGithubの問題を入手してください。

購読すると、このサンプルの**2つの異なるバージョン**にアクセスできます。1つはd3-hierarchyを使用し、もう1つはdagre.jsをレイアウトエンジンとして使用します。
アニメーションは簡単にオフにすることができ、d3-timerを使用して実装されています。
依存関係：reactflow、d3-hierarchy、d3-timer