使用 AntV/G6 画多层级树状图并添加同级节点连接线

可以使用 G6 的 Tree 模式来实现多层级树状图，并添加同级子节点之间的连接线。以下步骤展示了具体实现方法：

创建一个 Graph 实例，并设置渲染容器：

const graph = new Graph({
    container: 'container',
    modes: {
        default: ['drag-canvas', 'zoom-canvas', 'drag-node']
    }
});

设置节点的布局：

graph.node()
    .shape('treeNode') // 设置节点的形状为 treeNode
    .layout({
        type: 'compactBox',
        direction: 'LR' // 树的渲染方向
    });

设置节点的样式：

graph.edge()
    .shape('smooth') // 设置边的形状为 smooth
    .style({
        default: {
            stroke: '#A3B1BF',
            lineWidth: 1
        }
    });

创建节点和边：

// 创建节点
const root = graph.addItem('node', {
    id: 'root',
    label: 'Root',
    x: 100,
    y: 100
});
const n1 = graph.addItem('node', {
    id: 'n1',
    label: 'Node1',
    parent: 'root'
});
const n2 = graph.addItem('node', {
    id: 'n2',
    label: 'Node2',
    parent: 'root'
});

// 创建边
graph.addItem('edge', {
    source: 'n1',
    target: 'n2'
});

渲染图：

graph.render();

完成以上步骤，就可以画出一棵多层级树状图，并且可以添加同级子节点之间的连接线。