径向布局 Radial
上一篇
脑图树 Mindmap
下一篇
随机布局 Random
Loading...
径向（Radial）布局是一种将节点以同心圆方式分层排列的图布局算法，常用于展示层级关系、社群结构等。该布局支持节点防重叠、分组排序等高级特性，适用于多种网络结构的可视化。
createGraph({autoFit: 'view',data: {nodes: [{ id: '0' },{ id: '1' },{ id: '2' },{ id: '3' },{ id: '4' },{ id: '5' },{ id: '6' },{ id: '7' },{ id: '8' },{ id: '9' },{ id: '10' },{ id: '11' },{ id: '12' },{ id: '13' },{ id: '14' },{ id: '15' },{ id: '16' },{ id: '17' },{ id: '18' },{ id: '19' },{ id: '20' },{ id: '21' },{ id: '22' },{ id: '23' },{ id: '24' },{ id: '25' },{ id: '26' },{ id: '27' },{ id: '28' },{ id: '29' },{ id: '30' },{ id: '31' },{ id: '32' },{ id: '33' },],edges: [{ source: '0', target: '1' },{ source: '0', target: '2' },{ source: '0', target: '3' },{ source: '0', target: '4' },{ source: '0', target: '5' },{ source: '0', target: '7' },{ source: '0', target: '8' },{ source: '0', target: '9' },{ source: '0', target: '10' },{ source: '0', target: '11' },{ source: '0', target: '13' },{ source: '0', target: '14' },{ source: '0', target: '15' },{ source: '0', target: '16' },{ source: '2', target: '3' },{ source: '4', target: '5' },{ source: '4', target: '6' },{ source: '5', target: '6' },{ source: '7', target: '13' },{ source: '8', target: '14' },{ source: '10', target: '22' },{ source: '10', target: '14' },{ source: '10', target: '12' },{ source: '10', target: '24' },{ source: '10', target: '21' },{ source: '10', target: '20' },{ source: '11', target: '24' },{ source: '11', target: '22' },{ source: '11', target: '14' },{ source: '12', target: '13' },{ source: '16', target: '17' },{ source: '16', target: '18' },{ source: '16', target: '21' },{ source: '16', target: '22' },{ source: '17', target: '18' },{ source: '17', target: '20' },{ source: '18', target: '19' },{ source: '19', target: '20' },{ source: '19', target: '33' },{ source: '19', target: '22' },{ source: '19', target: '23' },{ source: '20', target: '21' },{ source: '21', target: '22' },{ source: '22', target: '24' },{ source: '22', target: '26' },{ source: '22', target: '23' },{ source: '22', target: '28' },{ source: '22', target: '30' },{ source: '22', target: '31' },{ source: '22', target: '32' },{ source: '22', target: '33' },{ source: '23', target: '28' },{ source: '23', target: '27' },{ source: '23', target: '29' },{ source: '23', target: '30' },{ source: '23', target: '31' },{ source: '23', target: '33' },{ source: '32', target: '33' },],},node: {style: {labelFill: '#fff',labelPlacement: 'center',labelText: (d) => d.id,},},layout: {type: 'radial',nodeSize: 32,unitRadius: 100,linkDistance: 200,},behaviors: ['drag-canvas', 'drag-element'],},{ width: 600, height: 400 },(gui, graph) => {const options = {nodeSize: 32,unitRadius: 100,linkDistance: 200,preventOverlap: false,strictRadial: true,sortBy: undefined,sortStrength: 10,};const optionFolder = gui.addFolder('Radial Layout Options');optionFolder.add(options, 'nodeSize', 1, 100, 1);optionFolder.add(options, 'unitRadius', 10, 300, 1);optionFolder.add(options, 'linkDistance', 10, 400, 1);optionFolder.add(options, 'preventOverlap');optionFolder.add(options, 'strictRadial');optionFolder.add(options, 'sortStrength', 1, 100, 1);optionFolder.add(options, 'sortBy', [undefined, 'data', 'id']);optionFolder.onChange(async ({ property, value }) => {graph.setLayout(Object.assign({}, graph.getLayout(), {[property]: value,}),);await graph.layout();graph.fitView();});},);
const graph = new Graph({layout: {type: 'radial',nodeSize: 32,unitRadius: 100,linkDistance: 200,},// 其他配置...});
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| type | 布局类型 | string | radial | ✓ |
| center | 圆心坐标 | [number, number] | - | |
| focusNode | 辐射中心节点 | string | Node | null | null | |
| height | 画布高度 | number | - | |
| width | 画布宽度 | number | - | |
| nodeSize | 节点大小（直径） | number | - | |
| nodeSpacing | 节点最小间距（防重叠时生效） | number | (nodeData: Node) => number | 10 | |
| linkDistance | 边长度 | number | 50 | |
| unitRadius | 每圈半径 | number | null | 100 | |
| maxIteration | 最大迭代次数 | number | 1000 | |
| maxPreventOverlapIteration | 防重叠最大迭代次数 | number | 200 | |
| preventOverlap | 是否防止节点重叠 | boolean | false | |
| sortBy | 同层节点排序字段 | string | - | |
| sortStrength | 同层节点排序强度 | number | 10 | |
| strictRadial | 是否严格每层节点在同一圆环上（防重叠时生效） | boolean | true |
import { Graph } from '@antv/g6';fetch('https://assets.antv.antgroup.com/g6/radial.json').then((res) => res.json()).then((data) => {const graph = new Graph({container: 'container',data,autoFit: 'center',layout: {type: 'radial',nodeSize: 32,unitRadius: 100,linkDistance: 200,},node: {style: {labelFill: '#fff',labelPlacement: 'center',labelText: (d) => d.id,},},behaviors: ['drag-canvas', 'drag-element'],});graph.render();});
效果如下：
