How to use the @antv/g.Group function in @antv/g

textGroup: null,
        _side: null,
      };
      // 创建label文本
      let texts = [];
      _.each(this.fields, (f) => {
        texts.push(d[f]);
      });
      if (this.formatter) {
        let formatted: any = this.formatter(d[angleField], { _origin: d, color }, idx);
        if (_.isString(formatted)) {
          formatted = [formatted];
        }
        texts = formatted;
      }
      const textGroup = new Group();
      const textAttrs: IAttrs = {
        x: 0,
        y: 0,
        fontSize: this.config.text.fontSize,
        lineHeight: this.config.text.fontSize,
        fontWeight: this.config.text.fontWeight,
        fill: this.config.text.fill,
      };
      // label1:下部label
      let lowerText = d[angleField];
      if (this.formatter) {
        lowerText = texts[0];
      }
      const lowerTextAttrs = _.clone(textAttrs);
      if (texts.length === 2) {
        lowerTextAttrs.fontWeight = 700;

protected renderVertical(min, max, colors) {
    const gridWidth = this.width;
    const gridHeight = this.height / colors.length;
    const gridLineContainer = new Group();
    const gridColors = clone(colors).reverse();
    const valueStep = (max - min) / colors.length;
    // 绘制色彩格子
    each(gridColors, (c, i) => {
      const y = gridHeight * i;
      // 记录每个grid代表的区间信息用于legend交互
      const appendInfo = { to: max - valueStep * i, from: max - valueStep * (i + 1) };
      const rect = this.container.addShape('rect', {
        attrs: {
          x: 0,
          y,
          width: gridWidth,
          height: gridHeight,
          fill: c,
          opacity: ACTIVE_OPACITY,
          cursor: 'pointer',

public _addItem(item: ToolTipContentItem) {
    const group = new G.Group();
    let markerRadius = this.get('markerStyle').radius;
    // marker
    if (item.marker) {
      // @ts-ignore
      const markerAttrs = Util.mix({}, item.marker, {
        x: item.marker.radius / 2,
        y: 0,
      });
      group.addShape('marker', {
        attrs: markerAttrs,
      });
      markerRadius = item.marker.radius;
    }
    // name
    const nameStyle = this.get('nameStyle');
    group.addShape('text', {

it('new item & destroy', () => {
    const group = new G.Group({});
    const item = new Item({
      model: { a: 1, b: 2 },
      group
    });
    item.set({
      a: 11,
      b: 22
    });
    expect(item.get('a')).eql(11);
    expect(item.isItem()).eql(true);
    const root = item.get('group');
    expect(item).not.to.be.undefined;
    expect(root).not.to.be.undefined;
    expect(item.getContainer()).eql(group);
    expect(item.get('type')).to.equal('item');
    const model = item.get('model');

it('show & hide', () => {
    const group = new G.Group({});
    const item = new Item({
      group
    });
    expect(item.get('visible')).to.be.true;
    item.changeVisibility(false);
    expect(item.get('visible')).to.be.false;
    expect(item.get('group').get('visible')).to.be.false;
    item.changeVisibility(true);
    expect(item.get('visible')).to.be.true;
    expect(item.get('group').get('visible')).to.be.true;
  });
  it('clear', () => {

it('show', () => {
    const tooltip = new Tooltip({
      x: 10,
      y: 10,
      items,
      titleContent: title,
      panelGroup: new G.Group(),
      panelRange,
    });
    tooltip.setPosition(20, 15);
    tooltip.show();
    expect(tooltip.get('visible')).to.equal(true);
  });

constructor(props: LayerCfg) {
    super();
    const options = this.getOptions(props);
    this.id = options.id;
    this.x = options.x;
    this.y = options.y;
    this.width = options.width;
    this.height = options.height;
    this.canvas = options.canvas;
    this.parent = options.parent;
    this.container = new G.Group();
  }