Ant Design Charts 组织结构图节点展开折叠控制详解

Ant Design Charts 组织结构图节点展开折叠控制详解

组织结构图交互控制的核心方法

Ant Design Charts 是基于 G6 图可视化引擎封装的高阶图表库，其组织结构图组件提供了灵活的节点展开与折叠控制能力。本文将深入解析两种核心控制方式及其实现原理。

数据驱动式控制

通过节点数据中的 style 属性直接定义初始状态是最简洁的方式：

const data = {
  nodes: [
    {
      id: 'root',
      children: ['child1', 'child2'],
      style: { collapsed: true }  // 初始状态为折叠
    },
    {
      id: 'child1',
      // 无style定义则保持默认展开状态
    }
  ]
};

这种方式的优势在于：

1. 声明式编程，直观易理解
2. 适合静态数据场景
3. 与React/Vue等框架的数据驱动理念高度契合

编程式动态控制

对于需要动态交互的场景，可通过获取图表实例进行命令式控制：

import { useRef, useEffect } from 'react';

function OrgChartWithControl() {
  const chartRef = useRef();
  
  useEffect(() => {
    if (chartRef.current) {
      // 展开特定节点
      chartRef.current.expandElement('node1');
      
      // 或折叠节点
      chartRef.current.collapseElement('node2');
    }
  }, []);

  return (
    <OrganizationChart 
      onReady={(graph) => { 
        chartRef.current = graph 
      }} 
    />
  );
}

关键点说明：

1. onReady 回调获取底层G6实例
2. 使用G6原生API实现精细控制
3. 适合需要响应事件或业务逻辑的场景

进阶应用场景

结合两种方式可以实现更复杂的交互：

• 初始状态由数据定义
• 用户操作后通过编程API更新状态
• 与状态管理库(Redux等)集成
• 实现"全部展开/折叠"等批量操作

性能优化建议

当处理大型组织结构图时：

1. 避免高频次单独操作节点
2. 对批量操作使用graph.collapseAll()等批量API
3. 考虑使用虚拟渲染技术

通过合理运用这些控制方法，可以构建出交互丰富、性能优异的组织结构图应用。