antv G6关系树,拓扑图 不同层级不同颜色

前端菜鸡… 近期遇到一个需求,要求关系图每个层级不同颜色展示,位置还得随机,目前echart实现后都不太满意…em 于是G6 …

废话不多说 看代码(效果)//

1,引入G6 相关 (基础数据是官方的)

import G6 from '@antv/g6'


 fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
                .then(res => res.json())
                .then(data => {
                  console.log(data)
                    const width = document.getElementById('map').scrollWidth;
                    const height = document.getElementById('map').scrollHeight || 500;
                     const graph= new G6.TreeGraph({
                        container: 'map',
                        width,
                        height,
                        pixelRatio: 2,
                        modes: {
                            default: [{
                                type: 'collapse-expand',
                                onChange: function onChange(item, collapsed) {
                                  console.log(item)
                                    const data = item.get('model').data;
                                    data.collapsed = collapsed;
                                    return true;
                                }
                            }, 'drag-canvas', 'zoom-canvas']
                        },
                        defaultNode: {
                            size: [200, 50],
                           
                            shape: 'rect',
                          
                            style: {
                                fill: '#C6E5FF',
                                stroke: '#5B8FF9'
                            }
                        },
                        defaultEdge: {
                            shape: 'cubic-horizontal',
                            style: {
                                stroke: '#A3B1BF'
                            }
                        },
                        layout: {
                            type: 'mindmap',
                            direction: 'H',
                            getHeight: () => {
                                return 40;
                            },
                            getWidth: () => {
                                return 160;
                            },
                            getVGap: () => {
                                return 10;
                            },
                            getHGap: () => {
                                return 100;
                            }
                        }
                    });
                    
                    let centerX = 0;
                    // 以下重点
                    graph.node(function (node) {
                        // depth 类似节点标识
                        if(node.depth == 0){
                            console.log(node)
                            return {
                                size:[100,60],
                                style:{
                                    fill:'red',
                                    // stroke:''
                                },
                                label:node.id
                            }
                        }
              
                        if(node.depth == 1){
                            console.log(node)
                            return {
                                size:[100,60],
                                style:{
                                    fill:'blue',
                             
                                },
                                label:node.id
                            }
                        }
                        return {
                            label: node.id, // 设置显示名称
                            labelCfg: {
                                // position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left', // 设置显示左右
                                offset: 5
                            }
                        };
                    });
                    graph.data(data);
                    graph.render();
                    graph.fitView();
                });

这样效果就出来了. 不同级不同颜色 看图