Circle
Previous
Triangle
Next
Custom Node
Loading...
A circle is a symmetrical geometric shape with a uniform radius.
Applicable scenarios:
createGraph({autoFit: 'center',data: {nodes: [{ id: 'node1', style: { size: 40, fill: '#7e3feb' } }],},node: {type: 'circle',},plugins: [{ type: 'grid-line', size: 30 }],},{ width: 600, height: 220 },(gui, graph) => {gui.add({ type: 'circle' }, 'type').disable();const options = { size: 40 };const optionFolder = gui.addFolder('circle.style');optionFolder.add(options, 'size', 0, 100, 1);optionFolder.onChange(({ property, value }) => {graph.updateNodeData([{ id: 'node1', style: { [property]: value } }]);graph.render();});},);
If the element has specific attributes, we will list them below. For all general style attributes, see BaseNode)
import { Graph, iconfont } from '@antv/g6';const style = document.createElement('style');style.innerHTML = `@import url('${iconfont.css}');`;document.head.appendChild(style);const data = {nodes: [{ id: 'default' },{ id: 'halo' },{ id: 'badges' },{ id: 'ports' },{id: 'active',states: ['active'],},{id: 'selected',states: ['selected'],},{id: 'highlight',states: ['highlight'],},{id: 'inactive',states: ['inactive'],},{id: 'disabled',states: ['disabled'],},],};const graph = new Graph({container: 'container',data,node: {type: 'circle',style: {size: 40,labelText: (d) => d.id,iconFontFamily: 'iconfont',iconText: '\ue602',halo: (d) => (d.id === 'halo' ? true : false),badges: (d) =>d.id === 'badges'? [{text: 'A',placement: 'right-top',},{text: 'Important',placement: 'right',},{text: 'Notice',placement: 'right-bottom',},]: [],badgeFontSize: 8,badgePadding: [1, 4],portR: 3,ports: (d) =>d.id === 'ports'? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]: [],},},layout: {type: 'grid',},});graph.render();