d3v6 compat, d3.mouse vs d3.pointer

src/charts/bubble-overlay.js

@@ -1,11 +1,9 @@
-import {mouse} from 'd3-selection';
-
 import {BaseMixin} from '../base/base-mixin';
 import {BubbleMixin} from '../base/bubble-mixin';
 import {transition} from '../core/core';
 import {constants} from '../core/constants';
 import {utils} from '../core/utils';
-import {adaptHandler} from '../core/d3compat';
+import {adaptHandler, d3compatPointer} from '../core/d3compat';
 
 const BUBBLE_OVERLAY_CLASS = 'bubble-overlay';
 const BUBBLE_NODE_CLASS = 'node';
@@ -202,11 +200,11 @@ export class BubbleOverlay extends BubbleMixin(BaseMixin) {
                 .append('rect')
                 .attr('width', this.width())
                 .attr('height', this.height())
-                .on('mousemove', () => {
-                    const position = mouse(debugG.node());
+                .on('mousemove', adaptHandler((d, evt) => {
+                    const position = d3compatPointer(evt, debugG.node());
                     const msg = `${position[0]}, ${position[1]}`;
                     debugText.text(msg);
-                });
+                }));
         } else {
             this.selectAll('.debug').remove();
         }

src/core/d3compat.js

@@ -1,7 +1,11 @@
-import {event} from 'd3-selection';
+import {event, mouse, pointer} from 'd3-selection';
 import {nest} from 'd3-collection';
 import {groups} from 'd3-array';
 
+// d3v6 has removed `d3.mouse` in favor of `d3.pointer`
+export const d3compatPointer =
+    typeof pointer === 'function' ? (evt, elem) => pointer(evt, elem) : (evt, elem) => mouse(elem);
+
 // d3v6 has changed the arguments for event handlers.
 // We are creating a wrapper which detects if the first argument is an event, which indicated d3@v6
 // Otherwise we assume lower versions of d3.