给一段自定义node，且node高度不一致的antv g6 树形范例代码

好的，以下是一段自定义node，且node高度不一致的antv g6 树形范例代码：

import G6 from '@antv/g6';

G6.registerNode('customNode', {
  draw(cfg, group) {
    const width = 60;
    const height = cfg.height || 60; // 自定义高度

    const shape = group.addShape('rect', {
      attrs: {
        x: -width / 2,
        y: -height / 2,
        width,
        height,
        fill: '#CDDDFD',
        stroke: '#6E6E6E',
        radius: 10,
      },
      name: 'rect-shape',
    });

    if (cfg.label) {
      group.addShape('text', {
        attrs: {
          text: cfg.label,
          x: 0,
          y: 0,
          textAlign: 'center',
          textBaseline: 'middle',
          fill: '#000000',
        },
        name: 'text-shape',
      });
    }
    return shape;
  },
});

const data = {
  id: 'root',
  label: 'root',
  children: [
    {
      id: 'node1',
      label: 'node1',
      children: [
        {
          id: 'node11',
          label: 'node11',
          height: 80, // 自定义高度
        },
        {
          id: 'node12',
          label: 'node12',
        },
      ],
    },
    {
      id: 'node2',
      label: 'node2',
      height: 80, // 自定义高度
    },
  ],
};

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.TreeGraph({
  container,
  width,
  height,
  modes: {
    default: ['zoom-canvas', 'drag-canvas', 'click-select'],
  },
  defaultNode: {
    type: 'customNode',
  },
  layout: {
    type: 'compactBox',
    direction: 'TB',
    getHGap: () => 50,
    getVGap: () => 20,
  },
});

graph.data(data);
graph.render();

这段代码定义了一个自定义节点类型 `customNode`，它可以根据配置中的 `height` 字段来设置节点高度，从而实现树形结构中不同节点高度不一致的效果。同时，这段代码还使用了 `compactBox` 布局来自动排列节点，使得整个树形结构更加紧凑。