How to use the @antv/g6.registerNode function in @antv/g6

import G6 from '@antv/g6';

/**
 * 该案例演示如何自定义一个折线图节点
 * by 镜曦
 *
*/

// 自定义折线图节点
G6.registerNode('circleLine', {
  draw(cfg, group) {

    const baseR = 30;
    let nowAngle = 0;

    // Ref line
    let refR = baseR;
    const refInc = 10;
    for (let i = 0; i < 5; i++) {
      group.addShape('circle', {
        // attrs: style
        attrs: {
          x: 0, // 居中
          y: 0,
          r: refR += refInc,
          stroke: '#bae7ff',

import G6 from '@antv/g6';
import { drawActivedNode } from './activedNode';
import { handleAnchor } from '@/components/Graph/shape/nodes/anchor';
import globalStyle from '../../common/globalStyle';
const { endNodeStyle1, endNodeStyle2 } = globalStyle;

G6.registerNode('endNode', {
  drawActivedNode,
  handleAnchor,
  draw(cfg, group) {
    // 外圆
    this.keyShape = group.addShape('circle', {
      attrs: { ...endNodeStyle1 },
    });
    // 内圆
    group.addShape('circle', { attrs: { ...endNodeStyle2 } });
    this.keyShape.baseType = 'endNode';
    return this.keyShape;
  },
  setState(name, value, item) {
    this.handleAnchor(name, value, item);
    this.drawActivedNode(name, value, item);
  },

ratio = ratio - ratio * 0.05;
      }
      graph.zoomTo(ratio, {
        x: point.x / pixelRatio,
        y: point.y / pixelRatio
      });
    } else {
      const x = ev.deltaX || ev.movementX;
      const y = ev.deltaY || ev.movementY;
      translate(x, y);
    }
    ev.preventDefault();
  }
});

G6.registerNode(
  'bubble',
  {
    drawShape(
      cfg,
      group,
    ) {
      const self = this;
      const r = cfg.size / 2;
      // a circle by path
      const path = [
        [ 'M', -r, 0 ],
        [ 'C', -r, r / 2, -r / 2, r, 0, r ],
        [ 'C', r / 2, r, r, r / 2, r, 0 ],
        [ 'C', r, -r / 2, r / 2, -r, 0, -r ],
        [ 'C', -r / 2, -r, -r, -r / 2, -r, 0 ],
        [ 'Z' ]

import G6 from '@antv/g6';

G6.registerNode('file-node', {
  draw: function draw(cfg, group) {
    const keyShape = group.addShape('rect', {
      attrs: {
        x: cfg.x - 4,
        y: cfg.y - 12,
        fill: '#fff',
        stroke: null
      }
    });
    if (cfg.collapsed) {
      group.addShape('marker', {
        attrs: {
          symbol: 'triangle',
          x: cfg.x + 4,
          y: cfg.y - 2,
          r: 4,

shadowBlur: 25,
      shadowColor: '#ccc',
    };
  },

  [`get${ShapeClassName.Anchor}defaultStyle`]() {
    return {
      stroke: this.themeColor || defaultColor,
      lineWidth: 2,
      fill: '#fff',
      r: 4,
    };
  },
};

G6.registerNode('bizNode', options);

shape.attr('opacity', 0.2);
          }
        } else {
          if (shape.attr('fill') !== '#fff') {
            shape.attr('fill', shape.oriFill || shape.attr('fill'));
          } else {
            shape.attr('opacity', 1);
          }
        }
      }
    }
  },
  'single-shape'
);

G6.registerNode(
  'animate-circle',
  {
    setState(
      name,
      value,
      item,
    ) {
      const shape = item.get('keyShape');
      const label = shape.get('parent').get('children')[1];
      if (name === 'disappearing' && value) {
        shape.animate(
          {
            onFrame(ratio) {
              return {
                opacity: 1 - ratio,
                r: shape.attr('r') * (1 - ratio)

const {
  sankey,
  sankeyLeft,
  sankeyRight,
  sankeyCenter,
  sankeyJustify
} = require('d3-sankey');
const Util = G6.Util;
const ALIGN_METHOD = {
  sankeyLeft,
  sankeyRight,
  sankeyCenter,
  sankeyJustify
};

G6.registerNode('sankey-node', {
  getPath(item) {
    const model = item.getModel();
    const { x, y, x0, y0, x1, y1 } = model;
    return [
      [ 'M', x0 - x, y0 - y ],
      [ 'L', x1 - x, y0 - y ],
      [ 'L', x1 - x, y1 - y ],
      [ 'L', x0 - x, y1 - y ],
      [ 'Z' ]
    ];
  }
});

G6.registerEdge('sankey-edge', {
  getPath(item) {
    const model = item.getModel();

constructor(props: RegisterProps, type: string) {
    super(props);

    const { name, config, extend } = props;

    switch (type) {
      case 'node':
        G6.registerNode(name, config, extend);
        break;

      case 'edge':
        G6.registerEdge(name, config, extend);
        break;

      case 'command':
        commandManager.register(name, config as Command);
        break;

      case 'behavior':
        behaviorManager.register(name, config as Behavior);
        break;

      default:
        break;

return button;
  },

  /**
   * following methods can be overridden by advice
   * */

  [`get${ShapeClassName.CollapseExpandButton}defaultStyle`]() {
    return {
      stroke: '#000',
      fill: '#fff',
    };
  },
};

G6.registerNode('mind-node', options, 'biz-node');

const drawGraphic = (id, config) => {
    const items = Ux.clone(config.items);
    G6.registerNode('treeNode', {
        anchor: [[0, 0.5], [1, 0.5]],
        enterAnimate: function enterAnimate(item) {
            const group = item.getGraphicGroup();
            const model = item.getModel();
            const x = model.x;
            const y = model.y;
            group.transform([['t', -x, -y], ['s', 0.01, 0.01], ['t', x, y]]);
            !group.get('destroyed') && group.animate({
                transform: [['t', -x, -y], ['s', 100, 100], ['t', x, y]]
            }, 450, 'easeBackOut');
        },
    });
    G6.registerEdge('smooth', {
        getPath: function getPath(item) {
            const points = item.getPoints();
            const start = points[0];