Using React Component to Define Your G6 Graph Node
npm install @antv/g6-react-node> Using React Component to custom your g6 node
``jsx``
import {
Group,
Rect,
Text,
Circle,
Image,
createNodeFromReact,
} from '@antv/g6-react-node';
const ReactNode = ({ cfg = {} }) => {
const { description, meta = {}, label = 'label' } = cfg;
return (
width: 150,
height: 20,
fill: cfg.color,
radius: [6, 6, 0, 0],
cursor: 'move',
stroke: cfg.color,
}}
draggable
>
marginTop: 2,
marginLeft: 75,
textAlign: 'center',
fontWeight: 'bold',
fill: '#fff',
}}
>
{label}
width: 150,
height: 55,
stroke: cfg.color,
fill: '#ffffff',
radius: [0, 0, 6, 6],
}}
>
Desc: {description}
Creator: {meta.creatorName}
stroke: cfg.color,
r: 10,
fill: '#fff',
marginLeft: 75,
cursor: 'pointer',
}}
name="circle"
>
img:
'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
width: 12,
height: 12,
marginLeft: 69,
marginTop: -5,
}}
/>
);
};
G6.registerNode('yourNode', createNodeFromReact(ReactNode));