Circle
Previous
Combo Overview
Next
Combo Configuration Options
Loading...
The circular combo wraps child nodes or child combos with a circular boundary, suitable for representing equal or non-hierarchical group relationships.
Applicable scenarios:
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 以使用圆形组合。
If the element has its specific attributes, we will list them below. For all general style attributes, see BaseCombo
The following example shows the distribution of interest group members:
createGraph({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,},{ width: 600, height: 600 },);