antv G6默认树图的节点展开2个层级（包含根节点）并避免占位

import React, { useEffect, useRef } from 'react';
import G6 from '@antv/g6';

const CollapsibleTreeDiagram = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    // 初始化图形实例，设置 defaultExpandLevel 为 1
    const graph = new G6.TreeGraph({
      container: containerRef.current,
      width: 800,
      height: 600,
      modes: {
        default: ['drag-canvas', 'zoom-canvas'], // 不启用默认的 collapse-expand 行为
      },
      layout: {
        type: 'compactBox', // 使用紧凑盒布局算法
        direction: 'TB',
        getId: (d) => d.id,
        getHeight: () => 16,
        getWidth: () => 16,
        getVGap: () => 10,
        getHGap: () => 50,
        ignoreEdgeLength: true, // 忽略边的长度，避免为未展开的子节点预留空间
      },
      defaultNode: {
        size: 24,
        style: {
          fill: '#C6E5FF',
          stroke: '#5B8FF9',
        },
      },
      defaultEdge: {
        style: {
          stroke: '#A3C5FD',
        },
      },
      nodeStateStyles: {
        hover: {
          fill: '#7FC4FF',
        },
      },
      // 设置默认展开层级为 1  根节点为0
      defaultExpandLevel: 1,
    });

    // 定义树结构数据，并手动设置前两层节点为展开状态
    function expandFirstTwoLevels(data, level = 0) {
      if (level < 1 && data.children) {
        data.collapsed = false;
        data.children.forEach(child => expandFirstTwoLevels(child, level + 1));
      } else if (data.children) {
        data.collapsed = true; // 默认折叠第三层及更深的节点
      }
    }

    const data = {
      id: 'root',
      label: 'Root Node',
      children: [
        {
          id: 'child1',
          label: 'Child Node 1',
          children: [
            { id: 'grandchild1', label: 'Grandchild Node 1' },
            { id: 'grandchild2', label: 'Grandchild Node 2', children: [
              { id: 'greatgrandchild1', label: 'Great Grandchild Node 1' }
            ]},
          ],
        },
        {
          id: 'child2',
          label: 'Child Node 2',
          children: [
            { id: 'grandchild3', label: 'Grandchild Node 3' },
          ],
        },
      ],
    };

    // 设置前两个层级的节点为展开状态
    expandFirstTwoLevels(data);

    // 渲染数据到图形中
    graph.data(data);
    graph.render();

    // 监听节点点击事件
    graph.on('node:click', (evt) => {
      const clickedNode = evt.item;
      const model = clickedNode.getModel();
      
      // 只展开或折叠当前节点，而不影响其子节点的状态
      const newCollapsedState = !model.collapsed;

      // 更新节点的 collapsed 状态
      graph.updateItem(clickedNode, { collapsed: newCollapsedState });

      // 如果是展开操作，确保子节点保持折叠状态
      if (!newCollapsedState && clickedNode.get('children')) {
        clickedNode.get('children').forEach(child => {
          graph.updateItem(child, { collapsed: true }); // 确保子节点保持折叠
        });
      }

      // 刷新布局以反映更改
      graph.refreshLayout();
    });

    graph.fitCenter();
    
    // 清理图形实例
    return () => {
      graph.destroy();
    };
  }, []);

  return <div ref={containerRef} style={{ border: '1px solid #ccc', height: '600px' }} />;
};

export default CollapsibleTreeDiagram;