d3-drag 0.3.0 - "Cannot read property 'button' of null"

Question

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?

Answer 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==

Answer 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.

Answer 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