How to use the raphael function in raphael

left: 162.72727272727275,
                top: 200.08,
                startTop: 224.39999999999998
            },
            {
                left: 209.0909090909091,
                top: 155.696,
                startTop: 224.39999999999998
            },
            {
                left: 255.45454545454547,
                top: 121.03999999999999,
                startTop: 224.39999999999998
            }
        ];
        const paper = raphael(container, dimension.width, dimension.height); // eslint-disable-line new-cap
        const data = {
            theme: {
                colors: ['#f4bf75']
            },
            dimension,
            options: {},
            groupPositions
        };
        it('should set the opacity of series area region by an areaOpacity property.', () => {
            data.options.areaOpacity = 0.3;
            areaChart.render(paper, data);
            const {opacity} = areaChart.groupAreas[0].area.attrs;

            expect(opacity).toBe(0.3);
        });

constructor(options, graph) {
        this.graph = graph;

        this.canvasDom = document.getElementById(options.canvasId);
        this.paper = new Raphael(this.canvasDom);


        this.canvasClickCb = options.canvasClickCb;
        this.nodeClickCb = options.nodeClickCb;

        // 视野设置
        this.viewportHandle = Viewport(this.canvasDom, this.paper);
        this.viewportHandle.setViewportDrag();

        shapeCustomAttr.init(this.paper);

        // svg点击事件:如果点击的是canvas,取消selected
        this.setCanvasClick();
    }

it('should set the existing fill and stroke values.', () => {
            const paper = raphael(document.createElement('DIV'), 100, 100);
            const {dot} = lineTypeBase.renderDot(paper, 1, '#D95576', 1);
            lineTypeBase._setPrevDotAttributes(0, dot);
            spyOn(dot, 'attr');

            lineTypeBase._hideDot(dot, 0, 1);
            const [dotSetArgs] = dot.attr.calls.mostRecent().args;

            expect(dotSetArgs.fill).toBe('#D95576');
            expect(dotSetArgs.stroke).toBe('#D95576');
        });
    });

it('reverse option is true, labels must be in reverse order', () => {
            const paper = raphael(document.createElement('div'), 100, 100);
            const legendSet = paper.set();

            legend.layout = {
                dimension: {
                    height: 200,
                    width: 100
                },
                position: {
                    left: 0,
                    top: 0
                }
            };
            legend.scaleData = {
                labels: [0, 50, 100, 150, 200],
                stepCount: 4
            };

beforeEach(() => {
        bulletChart = new RaphaelBulletChart();
        bulletChart.theme = {
            colors: ['yellow', 'red'],
            ranges: []
        };
        bulletChart.paper = raphael(paperContainer, 100, 100);
        seriesColor = 'yellow';
    });

beforeEach(() => {
        const container = dom.create('DIV');
        const plotContainer = dom.create('DIV');

        lineChart = lineChartFactory(container, rawData);
        plot = lineChart.componentManager.get('plot');
        plot.paper = raphael(plotContainer, 100, 100);
        plot.paper.pushDownBackgroundToBottom = () => {};
    });

function giveBirthToRaphael(nbChar, options) {
  const papers = [];
  let paper;

  for (let i = 0; i < nbChar; i += 1) {
    paper = new Raphael(options.element, `${options.width}px`, `${options.height}px`);
    paper.setViewBox(options.viewBox.x, options.viewBox.y, options.viewBox.w, options.viewBox.h);
    paper.canvas.setAttribute('class', 'dmak-svg');
    papers.push(paper);
  }
  return papers.reverse();
}

constructor(container){
        this.undoManager = new UndoManager();
        this.toolsMap=new Map();
        this._initBuiltinTools();
        this.container=container;
        this.paper=new Raphael(container[0],'100%','100%');
        this.allFigures=[];
        this.selectionFigures=[];
        this.selectionRects=this.paper.set();
        this.selectionPaths=this.paper.set();
        this.currentConnection=null;
        this._initEvent();
    }
    selectFigure(figure){

scope.update = function() {
            scope.size = scope.size || 50;
            scope.canvasSize = scope.size;
            scope.radius = scope.canvasSize / 4;
            scope.glowSize = scope.radius / 5;

            var template = '<div style="width: ' + scope.size + 'px; height: ' + scope.size + 'px;" id="canvas_container"></div>';
            element.html(template);
            $compile(element.contents())(scope);
            scope.paper = new Raphael($('#canvas_container', element)[0], scope.canvasSize, scope.canvasSize);
            var center = scope.canvasSize / 2;
            scope.circleElement = scope.paper.circle(center, center, scope.radius);
            scope.draw();
        }

export const callback = function(container, dimension) {
    const paper = raphael(container, dimension.width, dimension.height);
    const rect = paper.rect(0, 0, dimension.width, dimension.height);

    if (paper.raphael.svg) {
        appendGlowFilterToDefs(paper);
        appendShadowFilterToDefs(paper);
    }

    paper.pushDownBackgroundToBottom = function() {
        rect.toBack();
    };

    paper.changeChartBackgroundColor = function(color) {
        rect.attr({
            fill: color
        });
    };