How to use raphael - 10 common examples

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();
    }

attr.x1,
                    attr.y1,
                    "L",
                    attr.x2,
                    attr.y2,
                    "Z"];
  delete attr.x1;
  delete attr.y1;
  delete attr.x2;
  delete attr.y2;
  return this.path(pathString);
};


// extending raphael with a polygon function
Raphael.fn.polygon = function(attr) {
  var pointString = attr.points;
  var poly = ['M'],
      point = pointString.split(' ');

  for(var i=0; i < point.length; i++) {
     var c = point[i].split(',');
     for(var j=0; j < c.length; j++) {
        var d = parseFloat(c[j]);
        if (!isNaN(d))
          poly.push(d);
     }
     if (i === 0)
      poly.push('L');
  }
  poly.push('Z');
  delete attr.points;

res = res[name]
                    }
                    // eslint-disable-next-line
                    typeof res == 'function' && isFunc && (res = res())
                }
            })
            // eslint-disable-next-line
            res = (res == null || res == obj ? all : res) + ''
            return res
        },
        fill = function (str, obj) {
            return String(str).replace(tokenRegex, function (all, key) {
                return replacer(all, key, obj)
            })
        }
    Raphael.fn.popup = function (X, Y, set, pos, ret) {
        pos = String(pos || 'top-middle').split('-')
        pos[1] = pos[1] || 'middle'

        // eslint-disable-next-line
        let r = 5,
            bb = set.getBBox(),
            w = Math.round(bb.width),
            h = Math.round(bb.height),
            x = Math.round(bb.x) - r,
            y = Math.round(bb.y) - r,
            gap = Math.min(h / 2, w / 2, 10),
            shapes = {
                top: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}l-{right},0-{gap},{gap}-{gap}-{gap}-{left},0a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z',
                bottom: 'M{x},{y}l{left},0,{gap}-{gap},{gap},{gap},{right},0a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z',
                right: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}l0-{bottom}-{gap}-{gap},{gap}-{gap},0-{top}a{r},{r},0,0,1,{r}-{r}z',
                left: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}l0,{top},{gap},{gap}-{gap},{gap},0,{bottom}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z'

res = res[name]
                    }
                    // eslint-disable-next-line
                    typeof res == 'function' && isFunc && (res = res())
                }
            })
            // eslint-disable-next-line
            res = (res == null || res == obj ? all : res) + ''
            return res
        },
        fill = function (str, obj) {
            return String(str).replace(tokenRegex, function (all, key) {
                return replacer(all, key, obj)
            })
        }
    Raphael.fn.popup = function (X, Y, set, pos, ret) {
        pos = String(pos || 'top-middle').split('-')
        pos[1] = pos[1] || 'middle'

        // eslint-disable-next-line
        let r = 5,
            bb = set.getBBox(),
            w = Math.round(bb.width),
            h = Math.round(bb.height),
            x = Math.round(bb.x) - r,
            y = Math.round(bb.y) - r,
            gap = Math.min(h / 2, w / 2, 10),
            shapes = {
                top: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}l-{right},0-{gap},{gap}-{gap}-{gap}-{left},0a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z',
                bottom: 'M{x},{y}l{left},0,{gap}-{gap},{gap},{gap},{right},0a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z',
                right: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}v{h4},{h4},{h4},{h4}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}l0-{bottom}-{gap}-{gap},{gap}-{gap},0-{top}a{r},{r},0,0,1,{r}-{r}z',
                left: 'M{x},{y}h{w4},{w4},{w4},{w4}a{r},{r},0,0,1,{r},{r}l0,{top},{gap},{gap}-{gap},{gap},0,{bottom}a{r},{r},0,0,1,-{r},{r}h-{w4}-{w4}-{w4}-{w4}a{r},{r},0,0,1-{r}-{r}v-{h4}-{h4}-{h4}-{h4}a{r},{r},0,0,1,{r}-{r}z'

// http://commons.wikimedia.org/wiki/File:Blank_US_Map.svg
// http://commons.wikimedia.org/wiki/File:Usa_edcp_relief_location_map.png
// http://www.ravelrumba.com/code/demos/us-map-raphael/demo-animated.html
// http://mathworld.wolfram.com/AlbersEqual-AreaConicProjection.html
// from https://github.com/the55/usmap

var Raphael = require('raphael');

Raphael.fn.USMap = function(){
  var paper = this;
  var map = {
    width: 950, // this is the svg width
    drawnStates: new Array(50),
    stateStyle: {
      //"fill": "#d3d3d3",
      "fill": "#74bbfa",
      "fill-opacity": "1",
      "stroke": "#eee",
      "stroke-opacity": "1",
      "stroke-linejoin": "round",
      "stroke-miterlimit": "4",
      //"stroke-width": "0.75",
      "stroke-width": "2.25",
      "stroke-dasharray": "none"

});
  });

  var groupsExist = false, x;
  for (x in groupSet){
    groupsExist = true;
    break;
  }
  if (groupsExist) {
    myNewSet.groups = groupSet;
  }
  return myNewSet;
};


Raphael.fn.line = function(attr){
  var pathString = ["M",
                    attr.x1,
                    attr.y1,
                    "L",
                    attr.x2,
                    attr.y2,
                    "Z"];
  delete attr.x1;
  delete attr.y1;
  delete attr.x2;
  delete attr.y2;
  return this.path(pathString);
};


// extending raphael with a polygon function

/*
* Raphael SVG Import Classic Copyright (c) 2015 Chris Chang, Ingvar Stepanyan
* Original Raphael SVG Import Copyright (c) 2009 Wout Fierens
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*
*/

if (!Raphael && require){
  var Raphael = require('raphael');
}
Raphael.fn.importSVG = function (svgXML, options) {
  "use strict";
  var myNewSet = this.set();
  var groupSet = {};
  var defaultTextAttr = {
    // stroke: "none"
    "text-anchor": "start"  // raphael defaults to "middle"
  };
  // minimal polyfill for String.trim()
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim#Polyfill
  var trim = function(string){
      return string.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
  // polyfill for Array.forEach
  var forEach = Function.prototype.bind && Array.prototype.forEach ? Function.prototype.call.bind(Array.prototype.forEach) : function (arr, callback) {
    for (var i = 0, length = arr.length; i < length; i++) {
      callback(arr[i], i, arr);

public draw() {
        this.sortJobs();
        const color = Raphael.getColor();

        // calculate label offset
        for (const job of this.jobs) {
            const l = this.r.text(0, 0, job.name)
                .attr({
                    "font": '13px Helvetica, Arial',
                    "font-weight": "bold",
                    "fill": "#676a6c"
                });
            const width = l.getBBox().width;
            l.hide();

            if (width > this.labelOffset) {
                this.labelOffset = width + this.box_padding + this.box_width;
            }
        }

draw() {
        this.sortJobs()
        const color = Raphael.getColor()

        // calculate label offset
        for (const job of this.jobs) {
            const l = this.r.text(0, 0, job.name)
                .attr({
                    'font': '13px Helvetica, Arial',
                    'font-weight': 'bold',
                    'fill': '#676a6c'
                })
            const width = l.getBBox().width
            l.hide()

            if (width > this.labelOffset) {
                this.labelOffset = width + this.box_padding + this.box_width
            }
        }