Add zorder attribute to control stacking order of SVG traces drawn into cartesian subplots

[emilykl]

What's new

• Adds a new attribute zindex to SVG Cartesian traces
• Behaves like CSS z-index: Traces with higher zindex values are drawn in front of traces with lower zindex values

Codepen

Screenshots:

TO DO:

• Evaluate performance

[ayjayt]

plotly/plotly.py#2345

[Farkites]

@emilykl @Farkites Right now on the master branch no traces are drawn inside overlayed subplot. Instead those overlayed traces are drawn inside a layer called overplot

plotly.js/src/plots/cartesian/index.js

Line 477 in 4390b0d

plotinfo.overplot = ensureSingle(plotgroup, 'g', 'overplot');

So it looks like handling the case of overlayed axes in this PR is possible with some minor changes 🤞

The issue is that the overplot layer is drawn after the plot layer which contains the main plot. So the trace with the main axis has always have the lowest zindex for the plot to be correct.

[archmoj]

@emilykl @Farkites Right now on the master branch no traces are drawn inside overlayed subplot. Instead those overlayed traces are drawn inside a layer called overplot

plotly.js/src/plots/cartesian/index.js

Line 477 in 4390b0d

plotinfo.overplot = ensureSingle(plotgroup, 'g', 'overplot');

So it looks like handling the case of overlayed axes in this PR is possible with some minor changes 🤞

The issue is that the overplot layer is drawn after the plot layer which contains the main plot. So the trace with the main axis has always have the lowest zindex for the plot to be correct.

It looks like for traces in overlayed subplots we could default zindex to be greater than the maximum of all zindex values in the overlaying subplot.
Then we should be able to draw them in the main subplot instead of overplot one. No?

[archmoj]

What is the desirable behavior when hovering over overlapping points?
For example in the following case if I hover over the first point at position y: 0 I get the info for the orange trace not the blue one which is placed on top.

Plotly.newPlot(gd, [{
    zindex: 100,
    marker: {size: 20},
    y: [0, 1]
}, {
    marker: {size: 20},
    y: [0, 2]
}]);

[archmoj]

💃
Excellent PR.
Thanks @emilykl @Farkites 🏅