diff --git a/draftlogs/6918_add.md b/draftlogs/6918_add.md index 2af28d6f804..835f03f69e8 100644 --- a/draftlogs/6918_add.md +++ b/draftlogs/6918_add.md @@ -1 +1,2 @@ -- Add a new attribute `zorder` to SVG based Cartesian traces (not to WebGL traces). Traces with higher `zorder` values are drawn in front of traces with lower `zorder` values. This feature was anonymously sponsored: thank you to our sponsor! \ No newline at end of file + - Add zorder attribute to control stacking order of SVG traces drawn into cartesian subplots [[#6918](https://github.com/plotly/plotly.js/pull/6918), [#6953](https://github.com/plotly/plotly.js/pull/6953)], + This feature was anonymously sponsored: thank you to our sponsor! diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 4165bbaeab3..883bf8c9194 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -381,8 +381,16 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) { } } } else { - for(curvenum = 0; curvenum < gd.calcdata.length; curvenum++) { - cd = gd.calcdata[curvenum]; + // take into account zorder + var zorderedCalcdata = gd.calcdata.slice(); + zorderedCalcdata.sort(function(a, b) { + var aZorder = a[0].trace.zorder || 0; + var bZorder = b[0].trace.zorder || 0; + return aZorder - bZorder; + }); + + for(curvenum = 0; curvenum < zorderedCalcdata.length; curvenum++) { + cd = zorderedCalcdata[curvenum]; trace = cd[0].trace; if(trace.hoverinfo !== 'skip' && helpers.isTraceInSubplots(trace, subplots)) { searchData.push(cd); diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 1fd2b8b461f..e666526651e 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -4780,6 +4780,52 @@ describe('hover distance', function() { }); }); +describe('hover working with zorder', function() { + 'use strict'; + + var mock = { + data: [{ + zorder: 100, + marker: {size: 50}, + text: ['A', 'B'], + y: [0, 1] + }, { + marker: {size: 50}, + text: ['C', 'D'], + y: [2, 1] + }], + layout: { + width: 400, + height: 400, + showlegend: false, + hovermode: 'closest' + } + }; + + afterEach(destroyGraphDiv); + + beforeEach(function(done) { + Plotly.newPlot(createGraphDiv(), mock).then(done); + }); + + it('pick the trace on top', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', {xval: 1}, 'xy'); + + expect(gd._hoverdata.length).toEqual(1); + + assertHoverLabelContent({ + nums: '(1, 1)\nB', + name: 'trace 0' + }); + + var hoverTrace = gd._hoverdata[0]; + expect(hoverTrace.text).toEqual('B'); + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(1); + }); +}); + describe('hover label rotation:', function() { var gd; diff --git a/test/jasmine/tests/select_test.js b/test/jasmine/tests/select_test.js index d8984a719c6..4e18bde72ba 100644 --- a/test/jasmine/tests/select_test.js +++ b/test/jasmine/tests/select_test.js @@ -301,7 +301,7 @@ describe('Click-to-select', function() { return _immediateClickPt({ x: 130, y: 250 }); }) .then(function() { - assertSelectedPoints([], [1], []); + assertSelectedPoints([0], [], []); }) .then(done, done.fail); });