15

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?

5
  • Hey, any one found working answer. I am also getting the same error, but no answer is working from the list Commented Sep 18, 2018 at 18:08
  • @Mallikarjuna ran into the same issue. I was originally using d3(latest version 5) but after downgraded it to d3v4 it now works!
    – Joshua
    Commented Oct 2, 2018 at 6:34
  • @konekoya current I am using the D3 version 4.13.0 Commented Oct 3, 2018 at 13:27
  • So, you mean it does work?
    – Joshua
    Commented Oct 4, 2018 at 3:31
  • No, it is not working Commented Oct 10, 2018 at 7:55

7 Answers 7

2

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.

1
  • 1
    I did this but am still having the same problem as the OP - I've also tried the stock import * as d3 from 'd3'; as well as Object.assign({}, d3, d3Zoom...) as suggested in the docs
    – bak202
    Commented Oct 12, 2018 at 10:33
1

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

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.

1

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

The right answer is from this github issue. Add the following to your package.json:

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.