使用antv的G6展示折叠节点树的效果

最新推荐文章于 2026-05-11 11:40:35 发布

原创

最新推荐文章于 2026-05-11 11:40:35 发布 · 8.6k 阅读

本文介绍如何使用 AntV G6 库构建复杂的组织结构图表组件，并详细讲解了图表绘制过程中的关键代码实现，包括节点和边的自定义样式、交互事件处理等。

安装：
npm install --save @antv/g6;
效果图展示：
在这里插入图片描述

这些代码可以直接拿过去用，这是封装的一个公共组件。

import React, { useEffect, useState } from 'react';
// 引入G6
import G6 from '@antv/g6';
// 引入antv的样式
import insertCss from 'insert-css';
const GsixManage = (props) => {
    const listObj = {
        id: 'A',
        label: 'root',
        name: "张三",
        children: [
            {
                id: 'c1',
                label: 'c1',
                name: "李四",
                children: [
                    {
                        id: 'c1-1',
                        label: 'c1-1',
                        name: "李五",
                        children: [
                            {
                                id: "c1-1-1",
                                label: "c1-1-1",
                                name: "白龙马",
                            },
                            {
                                id: "c1-1-2",
                                label: "c1-1-2",
                                name: "唐三藏",
                                children: [
                                    {
                                        id: "c1-1-1-1",
                                        label: "c1-1-1-1",
                                        name: "沙悟净",
                                    },
                                    {
                                        id: "c1-1-1-2",
                                        label: "c1-1-1-2",
                                        name: "孙悟空",
                                    },
                                ]
                            },
                        ]
                    },
                    {
                        id: 'c1-2',
                        label: 'c1-2',
                        name: "五六",
                        children: [
                            {
                                id: 'c1-2-1',
                                label: 'c1-2-1',
                                name: "六七",
                            },
                            {
                                id: 'c1-2-2',
                                label: 'c1-2-2',
                                name: "七八",
                            },
                        ],
                    },
                ],
            },
            {
                id: 'c2',
                label: 'c2',
                name: "七八",
            },
            {
                id: 'c3',
                label: 'c3',
                name: "七八",
                children: [
                    {
                        id: 'c3-1',
                        label: 'c3-1',
                        name: "七八",
                    },
                    {
                        id: 'c3-2',
                        label: 'c3-2',
                        name: "七八",
                        children: [
                            {
                                id: 'c3-2-1',
                                label: 'c3-2-1',
                                name: "七八",
                            },
                            {
                                id: 'c3-2-2',
                                label: 'c3-2-2',
                                name: "七八",
                            },
                            {
                                id: 'c3-2-3',
                                label: 'c3-2-3',
                                name: "七八",
                            },
                        ],
                    },
                    {
                        id: 'c3-3',
                        label

标签