动态布局

此示例创建了一个自组织图，其中节点会自动以树状结构进行定位。主要功能包括：

¥This example creates a self-organizing graph where nodes position themselves automatically in a tree-like structure. Key features include:

• 节点创建：用户无需手动放置或连接节点，只需点击占位符元素即可添加新节点。

  ¥Node creation: Instead of manually placing or connecting nodes, users click on placeholder elements to add new nodes

• 多个交互点：通过点击节点添加子节点，将占位符转换为节点，或在边上使用 ”*” 按钮在现有节点之间插入节点。

  ¥Multiple interaction points: Add children by clicking on nodes, convert placeholders into nodes, or insert nodes between existing ones using the ”+” button on edges

• 智能布局算法：当图形发生变化时，由 d3-hierarchy 提供支持的自动布局钩子会重新计算所有位置。

  ¥Smart layout algorithm: When the graph changes, an auto-layout hook powered by d3-hierarchy recalculates all positions

• 平滑过渡：节点会以动画形式移动到新位置，即使复杂度增加也能保持视觉清晰度。

  ¥Smooth transitions: Nodes animate to their new positions, maintaining visual clarity even as complexity increases

关于此 Pro 示例

¥About this Pro Example

• 依赖：@xyflow/react , d3-hierarchy 

  ¥Dependencies: @xyflow/react , d3-hierarchy 

• 许可证：xyflow 专业版许可证 

  ¥License: xyflow Pro License