How to use @antv/g - 10 common examples

describe('Interval Element', () => {
  const div = document.createElement('div');
  div.id = 'interval';
  document.body.appendChild(div);

  const canvas = new Canvas({
    containerId: 'interval',
    renderer: 'canvas',
    width: 200,
    height: 200,
    pixelRatio: 2,
  });
  // const container = canvas.addGroup();
  const rectCoord = new Rect({
    start: {
      x: 0,
      y: 180,
    },
    end: {
      x: 180,
      y: 0,
    },

const expect = require('chai').expect;
const HtmlShape = require('../../../../src/extend/g/html');
const Util = require('../../../../src/util/');
const G = require('@antv/g');

// const Util = G6.Util;
// const HtmlShape = G6.Graph.HtmlShape;
// const Canvas = G6.Canvas;
const width = 500;
const height = 200;
const dom = document.createElement('div');
document.body.appendChild(dom);
const canvas = new G.canvas.Canvas({
  containerDOM: dom,
  width,
  height,
  pixelRatio: 1
});
const htmlElementContaniner = dom.appendChild(Util.createDOM('<div class="graph-container-html-Elements"></div>'));
htmlElementContaniner.style.width = width + 'px';
htmlElementContaniner.style.height = height + 'px';
htmlElementContaniner.style.position = 'absolute';
htmlElementContaniner.style.top = 0;
htmlElementContaniner.style.left = 0;
htmlElementContaniner.style['z-index'] = -1;
canvas.set('htmlElementContaniner', htmlElementContaniner);
describe('gExtend htmlShape test', function() {
  const html = canvas.addShape('html', {
    attrs: {

public init() {
    const { xBaseline, yBaseline } = this.options;
    const coord = this.view.get('coord');
    // TODO: xBaseline和yBaseline支持百分比
    // 根据xBaseline和yBaseline分割象限
    const scales = this.view.get('scales');
    const xScale = scales[this.options.plotOptions.xField];
    const yScale = scales[this.options.plotOptions.yField];
    // 先进行x方向的分割
    let xRegion;
    if (xBaseline > xScale.min && xBaseline < xScale.max) {
      const ratio = (xBaseline - xScale.min) / (xScale.max - xScale.min);
      xRegion = [
        new BBox(coord.start.x, coord.end.y, coord.width * ratio, coord.height),
        new BBox(coord.start.x + coord.width * ratio, coord.end.y, coord.width * (1 - ratio), coord.height),
      ];
      const verticalLineData = {
        start: { x: coord.start.x + coord.width * ratio, y: coord.end.y },
        end: { x: coord.start.x + coord.width * ratio, y: coord.start.y },
      };
      this.lineData.push(verticalLineData);
    } else {
      xRegion = new BBox(coord.start.x, coord.start.y, coord.width, coord.height);
    }
    // 再进行y方向的分割
    if (yBaseline > yScale.min && yBaseline < yScale.max) {
      const ratio = (yBaseline - yScale.min) / (yScale.max - yScale.min);
      const horizontalLineData = {
        start: { x: coord.start.x, y: coord.end.y + coord.height * ratio },
        end: { x: coord.end.x, y: coord.end.y + coord.height * ratio },

labels.forEach((l, idx) => {
        const item = items[idx];
        const oldBox = l.getBBox();
        const newY = oldBox.y + (ry - rx) * Math.cos(Math.PI / 2 - item.angle);
        // 椭圆公式
        let newX = center.x + Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
        if (_.isNaN(newX)) {
          newX = oldBox.x - DEFAULT_OFFSET;
        }
        // offset between label-text and label-line
        const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
        l.attr('x', newX);
        l.attr('y', newY);
        l.set('box', newBox);
      });
    }

const yScale = scales[this.options.plotOptions.yField];
    // 先进行x方向的分割
    let xRegion;
    if (xBaseline > xScale.min && xBaseline < xScale.max) {
      const ratio = (xBaseline - xScale.min) / (xScale.max - xScale.min);
      xRegion = [
        new BBox(coord.start.x, coord.end.y, coord.width * ratio, coord.height),
        new BBox(coord.start.x + coord.width * ratio, coord.end.y, coord.width * (1 - ratio), coord.height),
      ];
      const verticalLineData = {
        start: { x: coord.start.x + coord.width * ratio, y: coord.end.y },
        end: { x: coord.start.x + coord.width * ratio, y: coord.start.y },
      };
      this.lineData.push(verticalLineData);
    } else {
      xRegion = new BBox(coord.start.x, coord.start.y, coord.width, coord.height);
    }
    // 再进行y方向的分割
    if (yBaseline > yScale.min && yBaseline < yScale.max) {
      const ratio = (yBaseline - yScale.min) / (yScale.max - yScale.min);
      const horizontalLineData = {
        start: { x: coord.start.x, y: coord.end.y + coord.height * ratio },
        end: { x: coord.end.x, y: coord.end.y + coord.height * ratio },
      };
      this.lineData.push(horizontalLineData);
      each(xRegion, (region, index) => {
        const lastName = ['left', 'right'];
        const upper = {
          name: xRegion.length > 1 ? `top-${lastName[index]}` : 'top',
          bbox: new BBox(region.minX, region.minY, region.width, region.height * ratio),
        };
        this.regionData.push(upper);

labels.forEach((l, idx) => {
        const oldBox = l.getBBox();
        const newY = yPos - oldBox.height;
        // 椭圆公式
        let newX = center.x - Math.sqrt(1 - Math.pow(newY - center.y, 2) / Math.pow(ry, 2)) * rx;
        if (_.isNaN(newX)) {
          const prevLabel = labels[idx - 1];
          newX = prevLabel ? prevLabel.getBBox().x + 8 : oldBox.x - DEFAULT_OFFSET;
        }
        // 不能进入第一象限
        newX = Math.min(newX, center.x);
        // offset between label-text and label-line
        const newBox = new BBox(newX, newY, oldBox.width, oldBox.height);
        l.attr('x', newX);
        l.attr('y', newY);
        l.set('box', newBox);
        yPos = newBox.minY;
      });
    } else {

autoWrap: true, // 图例项是否自动换行
    itemMarginBottom: 4, // 图例项之间的底部间距
    backgroundPadding: 0, // 背景内边距
    maxLength: width, // 图例的最大高度或者宽度
  };
  const legend = new Legend.CanvasCategory(legendCfg as any);
  legendLayout(width, height, legend, position);
  addLegendInteraction(legend);
  /** return legend as a padding component */
  const bbox = legend.get('itemsGroup').getBBox();
  let paddingBbox;
  // merge legend inner padding
  const { innerPadding } = legendTheme;

  if (positions[0] === 'left') {
    paddingBbox = new BBox(legend.get('x') + innerPadding[3], legend.get('y'), bbox.width, bbox.height);
  } else if (positions[0] === 'right') {
    paddingBbox = new BBox(legend.get('x') - innerPadding[1], legend.get('y'), bbox.width, bbox.height);
  } else if (positions[0] === 'top') {
    paddingBbox = new BBox(legend.get('x'), legend.get('y') + innerPadding[0], bbox.width, bbox.height);
  } else if (positions[0] === 'bottom') {
    paddingBbox = new BBox(legend.get('x'), legend.get('y') - innerPadding[2], bbox.width, bbox.height);
  }
  return {
    position: positions[0],
    getBBox: () => {
      return paddingBbox;
    },
  };
}

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', {