Function gradientWithBounds

src/components/drawing/index.js:462–530

* gradient_with_bounds: create and apply a gradient fill for defined start and stop positions * * @param {object} sel: d3 selection to apply this gradient to * You can use `selection.call(Drawing.gradient, ...)` * @param {DOM element} gd: the graph div `sel` is part of * @param {string} gra

(sel, gd, gradientID, type, colorscale, prop, start, stop, inUserSpace, reversed)

 *     to center for radial gradients.
 */
function gradientWithBounds(sel, gd, gradientID, type, colorscale, prop, start, stop, inUserSpace, reversed) {
    var len = colorscale.length;

    var info;
    if (type === 'linear') {
        info = {
            node: 'linearGradient',
            attrs: {
                x1: start.x,
                y1: start.y,
                x2: stop.x,
                y2: stop.y,
                gradientUnits: inUserSpace ? 'userSpaceOnUse' : 'objectBoundingBox'
            },
            reversed: reversed
        };
    } else if (type === 'radial') {
        info = {
            node: 'radialGradient',
            reversed: reversed
        };
    }

    var colorStops = new Array(len);
    for (var i = 0; i < len; i++) {
        if (info.reversed) {
            colorStops[len - 1 - i] = [stopFormatter((1 - colorscale[i][0]) * 100), colorscale[i][1]];
        } else {
            colorStops[i] = [stopFormatter(colorscale[i][0] * 100), colorscale[i][1]];
        }
    }

    var fullLayout = gd._fullLayout;
    var fullID = 'g' + fullLayout._uid + '-' + gradientID;

    var gradient = fullLayout._defs
        .select('.gradients')
        .selectAll('#' + fullID)
        .data([type + colorStops.join(';')], Lib.identity);

    gradient.exit().remove();

    gradient
        .enter()
        .append(info.node)
        .each(function () {
            var el = d3.select(this);
            if (info.attrs) el.attr(info.attrs);

            el.attr('id', fullID);

            var stops = el.selectAll('stop').data(colorStops);
            stops.exit().remove();
            stops.enter().append('stop');

            stops.each(function (d) {
                var tc = tinycolor(d[1]);
                d3.select(this).attr({