Circle 圆形
上一篇
组合配置项
下一篇
Rect 矩形
Loading...
圆形组合以圆形边界包裹子节点或子组合,适合表示平等或非层级化的群组关系。
适用场景:
createGraph({data: {nodes: [{ id: 'node1', combo: 'combo1', style: { x: 250, y: 150 } },{ id: 'node2', combo: 'combo1', style: { x: 350, y: 150 } },{ id: 'node3', combo: 'combo2', style: { x: 250, y: 300 } },],combos: [{ id: 'combo1', combo: 'combo2' },{ id: 'combo2', style: {} },],},node: { style: { fill: '#7e3feb' } },behaviors: ['drag-element', 'collapse-expand'],plugins: ['grid-line'],animation: true,},{ width: 600, height: 400 },(gui, graph) => {gui.add({ type: 'circle' }, 'type').disable();},);
设置 combo.type
为 circle
以使用圆形组合。
如果元素有其特定的属性,我们将在下面列出。对于所有的通用样式属性,见 BaseCombo
以下示例为兴趣小组人员分布:
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 600,height: 600,autoFit: 'center',data: {nodes: [{ id: 'node1', combo: 'combo2', style: { x: 150, y: 150 } },{ id: 'node2', combo: 'combo2', style: { x: 200, y: 150 } },{ id: 'node3', combo: 'combo3', style: { x: 300, y: 150 } },{ id: 'node4', combo: 'combo3', style: { x: 350, y: 150 } },{ id: 'node5', combo: 'combo4', style: { x: 230, y: 300 } },{ id: 'node6', combo: 'combo4', style: { x: 280, y: 300 } },],combos: [{ id: 'combo1', style: { labelText: '兴趣小组' } },{ id: 'combo2', combo: 'combo1', style: { labelText: '书法' } },{ id: 'combo3', combo: 'combo1', style: { labelText: '影视' } },{ id: 'combo4', combo: 'combo1', style: { labelText: '游戏' } },],},node: {style: {labelText: (d) => d.id,},},behaviors: ['drag-element', 'collapse-expand'],animation: true,});graph.render();