自定义节点
注册 -- registerNode
我们通过以下接口往 G6 全局注册节点:
// 注册节点
G6.registerNode(name, { // 绘制 draw(item) { return keyShape }, // 获取锚点 anchor: array || object || callback }, extendShape);
绘制 -- draw
draw
是图项最终绘制的接口,决定了一个图项最终画成什么样。它是 G6 中拓展图形的最小接口,例如:
const data = { "nodes": [ { "shape": "customNode", "id": "node1", "x": 50, "y": 100 }, { "shape": "customNode", "id": "node2", "x": 250, "y": 100 } ], }; G6.registerNode('customNode', { draw(item){ const group = item.getGraphicGroup(); const model = item.getModel(); group.addShape('text', { attrs: { x: 0, y: 0, fill: '#333', text: '我是一个自定义节点,\n有下面那个方形和我自己组成' } }); group.addShape('text', { attrs: { x: 0, y: 0, fill: '#333', text: ' ('+model.x+', '+model.y+') \n 原点是组的图坐标', textBaseline: 'top' } }); group.addShape('circle', { attrs: { x: 0, y: 0, r: 4, fill: 'blue' } }); return group.addShape('rect', { attrs: { x: 0, y: 0,