Merge pull request #575 from plotly/general-subplot-hover

Generalize hover picking routine

Author: etpinard

src/plots/cartesian/graph_interact.js

@@ -310,27 +310,45 @@ function hover(gd, evt, subplot) {
 
     if(!subplot) subplot = 'xy';
 
+    // if the user passed in an array of subplots,
+    // use those instead of finding overlayed plots
+    var subplots = Array.isArray(subplot) ? subplot : [subplot];
+
     var fullLayout = gd._fullLayout,
-        plotinfo = fullLayout._plots[subplot],
-
-        //If the user passed in an array of subplots, use those instead of finding overlayed plots
-        subplots = Array.isArray(subplot) ?
-            subplot :
-            // list of all overlaid subplots to look at
-            [subplot].concat(plotinfo.overlays
-                .map(function(pi) { return pi.id; })),
-
-        xaArray = subplots.map(function(spId) {
-            var ternary = (gd._fullLayout[spId] || {})._ternary;
-            if(ternary) return ternary.xaxis;
-            return Axes.getFromId(gd, spId, 'x');
-        }),
-        yaArray = subplots.map(function(spId) {
-            var ternary = (gd._fullLayout[spId] || {})._ternary;
-            if(ternary) return ternary.yaxis;
-            return Axes.getFromId(gd, spId, 'y');
-        }),
-        hovermode = evt.hovermode || fullLayout.hovermode;
+        plots = fullLayout._plots || [],
+        plotinfo = plots[subplot];
+
+    // list of all overlaid subplots to look at
+    if(plotinfo) {
+        var overlayedSubplots = plotinfo.overlays.map(function(pi) {
+            return pi.id;
+        });
+
+        subplots = subplots.concat(overlayedSubplots);
+    }
+
+    var len = subplots.length,
+        xaArray = new Array(len),
+        yaArray = new Array(len);
+
+    for(var i = 0; i < len; i++) {
+        var spId = subplots[i];
+
+        // 'cartesian' case
+        var plotObj = plots[spId];
+        if(plotObj) {
+            xaArray[i] = plotObj.xaxis;
+            yaArray[i] = plotObj.yaxis;
+            continue;
+        }
+
+        // other subplot types
+        var _subplot = fullLayout[spId]._subplot;
+        xaArray[i] = _subplot.xaxis;
+        yaArray[i] = _subplot.yaxis;
+    }
+
+    var hovermode = evt.hovermode || fullLayout.hovermode;
 
     if(['x', 'y', 'closest'].indexOf(hovermode) === -1 || !gd.calcdata ||
             gd.querySelector('.zoombox') || gd._dragging) {

src/plots/ternary/index.js

@@ -38,7 +38,7 @@ exports.plot = function plotTernary(gd) {
     for(var i = 0; i < ternaryIds.length; i++) {
         var ternaryId = ternaryIds[i],
             fullTernaryData = Plots.getSubplotData(fullData, 'ternary', ternaryId),
-            ternary = fullLayout[ternaryId]._ternary;
+            ternary = fullLayout[ternaryId]._subplot;
 
         // If ternary is not instantiated, create one!
         if(ternary === undefined) {
@@ -50,7 +50,7 @@ exports.plot = function plotTernary(gd) {
                 fullLayout
             );
 
-            fullLayout[ternaryId]._ternary = ternary;
+            fullLayout[ternaryId]._subplot = ternary;
         }
 
         ternary.plot(fullTernaryData, fullLayout, gd._promises);
@@ -62,7 +62,7 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
 
     for(var i = 0; i < oldTernaryKeys.length; i++) {
         var oldTernaryKey = oldTernaryKeys[i];
-        var oldTernary = oldFullLayout[oldTernaryKey]._ternary;
+        var oldTernary = oldFullLayout[oldTernaryKey]._subplot;
 
         if(!newFullLayout[oldTernaryKey] && !!oldTernary) {
             oldTernary.plotContainer.remove();

src/plots/ternary/ternary.js

@@ -675,19 +675,6 @@ proto.initInteractions = function() {
     dragger.onclick = function(evt) {
         fx.click(gd, evt);
     };
-
-    // make a fake plotinfo for fx.hover
-    // it hardly uses it, could probably be refactored out...
-    // but specifying subplot by name does seem nice for js applications
-    // that want to hook into this.
-    if(!gd._fullLayout._plots) gd._fullLayout._plots = {};
-    gd._fullLayout._plots[_this.id] = {
-        overlays: [],
-        xaxis: _this.xaxis,
-        yaxis: _this.yaxis,
-        x: function() { return _this.xaxis; },
-        y: function() { return _this.yaxis; }
-    };
 };
 
 function removeZoombox(gd) {

src/traces/scatterternary/plot.js

@@ -13,11 +13,16 @@ var scatterPlot = require('../scatter/plot');
 
 
 module.exports = function plot(ternary, data) {
+    var plotContainer = ternary.plotContainer;
+
+    // remove all nodes inside the scatter layer
+    plotContainer.select('.scatterlayer').selectAll('*').remove();
+
     // mimic cartesian plotinfo
     var plotinfo = {
         x: function() { return ternary.xaxis; },
         y: function() { return ternary.yaxis; },
-        plot: ternary.plotContainer
+        plot: plotContainer
     };
 
     var calcdata = new Array(data.length),

test/jasmine/tests/hover_label_test.js

@@ -574,3 +574,34 @@ describe('hover info on stacked subplots', function() {
         });
     });
 });
+
+
+describe('hover info on overlaid subplots', function() {
+    'use strict';
+
+    afterEach(destroyGraphDiv);
+
+    it('should respond to hover', function(done) {
+        var mock = require('@mocks/autorange-tozero-rangemode.json');
+
+        Plotly.plot(createGraphDiv(), mock.data, mock.layout).then(function() {
+            mouseEvent('mousemove', 775, 352);
+
+            var axisText = d3.selectAll('g.axistext'),
+                hoverText = d3.selectAll('g.hovertext');
+
+            expect(axisText.size()).toEqual(1, 'with 1 label on axis');
+            expect(hoverText.size()).toEqual(2, 'with 2 labels on the overlaid pts');
+
+            expect(axisText.select('text').html()).toEqual('1', 'with correct axis label');
+
+            var textNodes = hoverText.selectAll('text');
+
+            expect(textNodes[0][0].innerHTML).toEqual('Take Rate', 'with correct hover labels');
+            expect(textNodes[0][1].innerHTML).toEqual('0.35', 'with correct hover labels');
+            expect(textNodes[1][0].innerHTML).toEqual('Revenue', 'with correct hover labels');
+            expect(textNodes[1][1].innerHTML).toEqual('2,352.5', 'with correct hover labels');
+
+        }).then(done);
+    });
+});

test/jasmine/tests/scatterternary_test.js

@@ -285,7 +285,7 @@ describe('scatterternary hover', function() {
 
     beforeEach(function() {
         var cd = gd.calcdata,
-            ternary = gd._fullLayout.ternary._ternary;
+            ternary = gd._fullLayout.ternary._subplot;
 
         pointData = {
             index: false,