Function makePlotFramework

src/plot_api/plot_api.js:3652–3808

(gd)

// makePlotFramework: Create the plot container and axes
// -------------------------------------------------------
function makePlotFramework(gd) {
    var gd3 = d3.select(gd);
    var fullLayout = gd._fullLayout;

    fullLayout._calcInverseTransform = calcInverseTransform;
    fullLayout._calcInverseTransform(gd);

    // Plot container
    fullLayout._container = gd3.selectAll('.plot-container').data([0]);
    fullLayout._container
        .enter()
        .insert('div', ':first-child')
        .classed('plot-container', true)
        .classed('plotly', true)
        // The plot container should always take the full with the height of its
        // parent (the graph div). This ensures that for responsive plots
        // without a height or width set, the paper div will take up the full
        // height & width of the graph div.
        // So, for responsive plots without a height or width set, if the plot
        // container's height is left to 'auto', its height will be dictated by
        // its childrens' height. (The plot container's only child is the paper
        // div.)
        // In this scenario, the paper div's height will be set to 100%,
        // which will be 100% of the plot container's auto height. That is
        // meaninglesss, so the browser will use the paper div's children to set
        // the height of the plot container instead. However, the paper div's
        // children do not have any height, because they are all positioned
        // absolutely, and therefore take up no space.
        .style({
            width: '100%',
            height: '100%'
        });

    // Make the svg container
    fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([0]);
    fullLayout._paperdiv
        .enter()
        .append('div')
        .classed('user-select-none', true)
        .classed('svg-container', true)
        .style('position', 'relative');

    // Make the graph containers
    // start fresh each time we get here, so we know the order comes out
    // right, rather than enter/exit which can muck up the order
    // TODO: sort out all the ordering so we don't have to
    // explicitly delete anything
    // FIXME: parcoords reuses this object, not the best pattern
    fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container').data([{}]);

    fullLayout._glcontainer.enter().append('div').classed('gl-container', true);

    fullLayout._paperdiv.selectAll('.main-svg').remove();
    fullLayout._paperdiv.select('.modebar-container').remove();

    fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child').classed('main-svg', true);

    fullLayout._toppaper = fullLayout._paperdiv.append('svg').classed('main-svg', true);