SOURCE

const { Graph } = G6;

const data = {
    nodes: Array.from({ length: 10 }).map((_, i) => ({ id: `node-${i}`, data: { category: i === 0 ? 'central' : 'around' }, })),
    edges: Array.from({ length: 9 }).map((_, i) => ({ source: `node-0`, target: `node-${i + 1}` })),
};

const graph = new Graph({
    container: 'container',
    data,
    node: {
        // type: (datum) => datum.id === 'node-1' ? 'circle' : 'rect',
        // style: {
        //     fill: (datum) => datum.id === 'node-1' ? 'red' : 'green',
        // },
        palette: {
            field: 'category',
            color: 'tableau',
        }
    },
    edge: {
        style: {
            //   stroke: 'yellow'
            width: 200
        }
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'fix-element-size'],
    layout: {
        type: 'radial',
    },
    plugins: [{
        type: 'grid-line',
        follow: true,
    },'toolbar','fullscreen'],
    theme: 'dark',
})

graph.render();

<!-- 准备一个容器 -->
<div id="container" style="height: 500px; background: rgba(0,0,0, 0.1);"></div>

<!-- 引入 G6 的 JS 文件 -->
<script src="https://unpkg.com/@antv/g6@5/dist/g6.min.js">
</script>