fix #3962 - don't build pointgroup array using d3-data indices

- N.B. in the case where multiple item in a given d3-data bound
  array have identical key-function results,
  *only the first* of those items is considered. This implies that
  the `i` in e.g `selection.each(function(d, i) { })` does not
  always increment with a constant step.

src/components/fx/hover.js

@@ -842,6 +842,8 @@ function createHoverText(hoverData, opts, gd) {
     // first create the objects
     var hoverLabels = container.selectAll('g.hovertext')
         .data(hoverData, function(d) {
+            // N.B. when multiple items have the same result key-function value,
+            // only the first of those items in hoverData gets rendered
             return [d.trace.index, d.index, d.x0, d.y0, d.name, d.attr, d.xa, d.ya || ''].join(',');
         });
     hoverLabels.enter().append('g')
@@ -1061,18 +1063,18 @@ function hoverAvoidOverlaps(hoverLabels, axKey, fullLayout) {
 
     // make groups of touching points
     var pointgroups = new Array(nLabels);
+    var k = 0;
 
-    hoverLabels.each(function(d, i) {
+    hoverLabels.each(function(d) {
         var ax = d[axKey];
         var axIsX = ax._id.charAt(0) === 'x';
         var rng = ax.range;
 
-        if(!i && rng && ((rng[0] > rng[1]) !== axIsX)) {
+        if(k === 0 && rng && ((rng[0] > rng[1]) !== axIsX)) {
             axSign = -1;
         }
-        pointgroups[i] = [{
+        pointgroups[k++] = [{
             datum: d,
-            i: i,
             traceIndex: d.trace.index,
             dp: 0,
             pos: d.pos,

test/jasmine/tests/box_test.js

@@ -437,6 +437,25 @@ describe('Test box hover:', function() {
         },
         nums: '0.6',
         name: 'pt #0'
+    }, {
+        desc: 'when zoomed in, cropping out labels',
+        mock: {
+            data: [{
+                type: 'box',
+                y: [1, 2, 2, 3]
+            }],
+            layout: {
+                // cropping out q1 and max w/o failing during hoverAvoidOverlap
+                // https://github.com/plotly/plotly.js/issues/3962
+                yaxis: {range: [1.6, 2.4]},
+                width: 400,
+                height: 400
+            }
+        },
+        pos: [200, 200],
+        nums: ['median: 2', 'min: 1', 'q3: 2.5'],
+        name: ['', '', ''],
+        axis: 'trace 0'
     }].forEach(function(specs) {
         it('should generate correct hover labels ' + specs.desc, function(done) {
             run(specs).catch(failTest).then(done);