D3-drag 0.3.0 - "cannot Read Property 'button' Of Null"

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', s

Solution 1:

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.

Solution 2:

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, d3-selection@1.3.0, 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==

Solution 3:

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

Solution 4:

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.

Solution 5:

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';