Antv G6实现思维导图

 G6 脑树图-自定义子节点分布js

自定义节点样式 及 收起/展开icon

具体配置参数参考官网：图配置 G6.Graph(cfg) | G6

<script>
    import G6 from '@antv/g6';
    
    export default {
        methods: {
            G6.registerNode(
                'tree-node', // 节点名称，后续使用时用此名称
                {
                    drawShape: function drawShape(cfg, group) {
                        //定义图中需要的节点
                        // 定义节点 rect
                        const rect = group.addShape('rect', {
                            // 'rect'表示矩形图形  circle：圆；rect：矩形；ellipse：椭圆；polygon：多边形；image：图片；marker：标记；path：路径；text：文本；dom(svg)：DOM（图渲染方式 renderer 为 'svg' 时可用）。
                            attrs: {
                                // 节点定义参数:颜色、阴影...
                                x: 0, // x 轴移动距离
                                y: 0, // y 轴移动距离
                                fill: 'red',
                                lineWidth: 1, // 描边宽度
                                shadowOffsetX: 10, // 阴影距形状的水平距离
                                shadowOffsetY: 10,