如何使用antvg6自定义节点

使用antvg6绘制树状图但是节点样式不符合要求，如何自定义呢？
查找文档参考这个例子 https://g6.antv.antgroup.com/examples/item/customNode/#card

下面是我写的代码

   G6.registerNode(
        'flow-circle',
        {
          /**
           * 绘制节点，包含文本
           * @param  {Object} cfg 节点的配置项
           * @param  {G.Group} group 图形分组，节点中图形对象的容器
           * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
           * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
           */
          draw(cfg, group) {
            const { name, childrenNum } = cfg
            const circleConfig = {
              width: 20,
              height: 20,
              lineWidth: 1,
              fontSize: 12,
              stroke: 'rgba(255,117,0, 1)',
              opacity: 1,
              r: 20,
              fill: 'rgba(255,117,0, 0.9)',
              cursor: 'pointer'
            }

            const nodeOrigin = {
              x: -circleConfig.width / 2,
              y: -circleConfig.height / 2
            }

            const textConfig = {
              textAlign: 'center',
              textBaseline: 'bottom',
              cursor: 'pointer',
              opacity: 1,
              fontSize: 16
            }
            /** 绘制大圆点 */
            const circle = group.addShape('circle', {
              attrs: {
                ...circleConfig,
                x: 0,
                y: 0
              },
              name: 'big-dot-shape'
            })

            /** 子节点数量 */
            group.addShape('text', {
              attrs: {
                ...textConfig,
                x: nodeOrigin.x + 10,
                y: nodeOrigin.y + 20,
                text: childrenNum,
                fill: '#fff'
              },
              name: 'childNum-shape'
            })

            /** 节点lable */
            const text = group
              .addShape('text', {
                attrs: {
                  ...textConfig,
                  // x: nodeOrigin.x + 10,
                  // y: nodeOrigin.y + 60,
                  x: nodeOrigin.x - 5,
                  y: nodeOrigin.y + 15,
                  text: name,
                  fill: '#000',
                  textAlign: 'end'
                },
                name: 'lable-shape'
              })
              .translate(-10, 6)
            // 三个顶级节点的文字不用转角度
            if (cfg.id !== '-1') {
              text.rotate(-0.4)
            }

            return circle
          },
          /**
           * 更新节点，包含文本
           * @override
           * @param  {Object} cfg 节点的配置项
           * @param  {Node} node 节点
           */
          update(cfg, node) {
            const { childrenNum, name } = cfg
            // 更新子节点数量
            const group = node.getContainer()
            const childNumShape = group.find(ele => ele.get('name') === 'childNum-shape')
            childNumShape.attrs.text = childrenNum

            // 更新所有的label
            const nameShape = group.find(ele => ele.get('name') === 'lable-shape')
            nameShape.attrs.text = name
            this.updateLinkPoints(cfg, group)
          },
          setState(name, value, item) {
            const group = item.getContainer()
            const bigDotShap = group.find(e => e.get('name') === 'big-dot-shape')
            if (name === 'highlight') {
              bigDotShap.attr({
                stroke: 'rgba(95,149,255, 1)',
                fill: 'rgba(95,149,255, 1)'
              })
            } else if (name === 'dark') {
              bigDotShap.attr({
                stroke: 'rgba(255,117,0, 1)',
                fill: 'rgba(255,117,0, 0.9)'
              })
            }
          }
        },
        'circle'
      )