自动布局
此示例演示了如何自动排列节点。它引入了一个可重复使用的 useAutoLayout
钩子,并展示了三种可在运行时切换的常用布局引擎:dagre 、d3-hierarchy 和 elk 。
¥This example demonstrates how to automatically arrange nodes. It introduces a reusable useAutoLayout
hook and showcases three popular layout engines that you can switch between at runtime: dagre , d3-hierarchy , and elk .
This is a Pro example. Get all pro examples, templates, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.
关于此 Pro 示例
¥About this Pro Example
-
依赖:@xyflow/react , @dagrejs/dagre , d3-hierarchy , elkjs
¥Dependencies: @xyflow/react , @dagrejs/dagre , d3-hierarchy , elkjs
-
包含一个可配置的
useAutoLayout
钩子,可在你的应用中重复使用。¥Includes a configurable
useAutoLayout
hook that can be reused in your applications -
提供不同布局算法的比较和交互式控件
¥Provides a comparison of different layout algorithms with interactive controls
-
注意:在你自己的应用中,通常只需选择一个布局引擎。
¥Note: In your own applications, you typically only need to choose one layout engine
-
许可证:xyflow 专业版许可证
¥License: xyflow Pro License