diff --git a/src/charts/bubble-overlay.js b/src/charts/bubble-overlay.js index 85d3092f1..721b64cbe 100644 --- a/src/charts/bubble-overlay.js +++ b/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(); } diff --git a/src/core/d3compat.js b/src/core/d3compat.js index 28059516d..b42048728 100644 --- a/src/core/d3compat.js +++ b/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.