1

Our react app uses d3 heavily, and we used to import all of d3 into our app using import * as d3 from 'd3'. To make our bundle smaller, we are replacing these with submodule imports such as import { select } from 'd3-selection'. However, we are struggling with importing d3.event in order to use d3.event.pageX:

Here is a snippet of our code:

.on('mouseover', function (d) {
    // console.log('d: ', d);
    // Tooltip Display + Position + Colors
    tipDiv.transition().duration(0).style('opacity', 1);
    tipDiv.html(tipHtml(d, tooltipName))
        .style('left', (d3.event.pageX - 10) + 'px')
        .style('top', (d3.event.pageY + 35) + 'px');
    tipDiv
        .style('background', colorScale(d.netFgPct7Hex))
        .style('color', whiteBlack(colorScale(d.netFgPct7Hex), 'rgb'));

This throws the error TypeError: Cannot read property 'pageX' of undefined which makes sense, because by removing the import * as d3 from 'd3', we're no longer importing d3.event. It doesn't seem like there is a separate d3-event module, and using: import { event} from 'd3-selection' doesn't work either, returning Attempted import error: 'event' is not exported from 'd3-selection'.

What submodule / how can we import and use d3.event then?

Edit: I'm looking into d3.pointer, and maybe d3.event.pageX is not needed per this post

Canovice
  • 9,012
  • 22
  • 93
  • 211
  • 1
    For D3v6 , d3.event has been removed, see [here](https://stackoverflow.com/q/63693132/7106086). – Andrew Reid Sep 10 '20 at 04:56
  • 1
    Does this answer your question? [Unable to get node datum on mouseover in D3 v6](https://stackoverflow.com/questions/63693132/unable-to-get-node-datum-on-mouseover-in-d3-v6) - this comment is autogenerated by SO when you flag something as duplicate – Ruben Helsloot Sep 10 '20 at 11:42

0 Answers0