d3-drag 0.3.0 - “Cannot read property 'button' of null”

13
votes

I'm trying to use d3-drag with a canvas a such:

select(canvas)
.call(
    drag()
    .container(canvas)
    .subject(partial(getNodeAtMouse, simulation, canvas))
    .on('start', someFunction))

However, I get the following error when I actually attempt to drag:

Cannot read property 'button' of null

from the following line in d3-drag (d3 original source code)

function defaultFilter() {
    return !d3Selection.event.button;
  }

If I remove that function (by specifying my own filter), I get the following error:

Cannot read property 'sourceEvent' of null

In d3-selection (d3 original source code)

function sourceEvent() {
    var current = exports.event, source;
    while (source = current.sourceEvent) current = source;
    return current;
  }

This makes me think that there is some bug between the expectations of d3-drag and d3-selection. Any ideas?

7
javascriptd3.js
Hey, any one found working answer. I am also getting the same error, but no answer is working from the list – Mallikarjuna
@Mallikarjuna ran into the same issue. I was originally using d3(latest version 5) but after downgraded it to d3v4 it now works! – konekoya
@konekoya current I am using the D3 version 4.13.0 – Mallikarjuna
So, you mean it does work? – konekoya
No, it is not working – Mallikarjuna

7 Answers

2
votes

Just for the sake of completeness, for implementing zoom, move and drag you need to replace import * as d3 from 'd3'; with the individual libraries: 

import {event as d3Event} from 'd3-selection';
import {zoom as d3Zoom} from 'd3-zoom';
import {drag as d3Drag} from 'd3-drag';
import {select as d3Select} from 'd3-selection';

And then replace d3.select() with d3Select(), d3.zoom() with d3Zoom(), d3.drag() with d3Drag() and for example d3.event.transform with d3Event.transform.

2
votes

If you use yarn package manager - checkout yarn.lock. For all d3 packages only one version on d3-selection should be sticked. For example in my case I fixed it manually by linking all mentioned d3-selection packages to one node_module version like:

d3-selection@1, d3-selection@^1.0.1, d3-selection@^1.1.0, [email protected], d3-selection@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
  integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==
1
votes

I was also getting this error when I was importing only d3-zoom. Solved it by importing both d3-zoom and d3-selection:

import {zoom} from 'd3-zoom';
import {select} from 'd3-selection';

Reference: https://github.com/d3/d3-zoom/issues/27

1
votes

For me it was the same reason as this: https://github.com/d3/d3-selection/issues/185#issuecomment-419474845

I'm using Yarn and it had added two versions of d3-select. I manually removed one from yarn.lock and then it worked.

0
votes

I don't know if this will work for you, but for me, the problem was because I wasn't importing the whole d3 package, which I'm guessing left the "event" undefined.

So instead of this: import {drag} from 'd3';

Now I'm using: import * as d3 from 'd3';

0
votes

add the following to your package.json:

"resolutions": { "d3-selection": "1.3.0" }

the right answer from :enter link description here

0
votes

I encountered this issue as well when I migrated yarn to npm ...

You need to :

  • Delete yarn.lock
  • Delete package-lock.json
  • Delete node_modules
  • run npm i
  • run npm start

and it's all good