D3-drag 0.3.0 - "Невозможно прочитать свойство 'button' null"

Я пытаюсь использовать d3-drag с холстом a:

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

Однако при попытке перетаскивания я получаю следующую ошибку:

Cannot read property 'button' of null

из следующей строки в d3-drag (исходный исходный код d3)

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

Если я удалю эту функцию (указав свой собственный фильтр), я получаю следующую ошибку:

Cannot read property 'sourceEvent' of null

В d3-выборе (исходный исходный код d3)

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

Это заставляет меня думать, что существует некоторая ошибка между ожиданиями d3-drag и d3-selection. Любые идеи?

Ответы

Ответ 1

Я также получал эту ошибку, когда я импортировал только d3-zoom. Решил его, импортировав как d3-zoom, так и d3-selection:

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

Ссылка: https://github.com/d3/d3-zoom/issues/27

Ответ 2

Просто для полноты, для реализации масштабирования, перемещения и перетаскивания вам нужно заменить import * as d3 from 'd3'; вместо import * as d3 from 'd3'; с отдельными библиотеками:

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

Затем замените d3.select() на d3Select(), d3.zoom() на d3Zoom(), d3.drag() на d3Drag() и, например, d3.event.transform на d3Event.transform.

Ответ 3

Я не знаю, будет ли это работать для вас, но для меня проблема была в том, что я не импортировал весь пакет d3, который, как я предполагаю, оставил "событие" undefined.

Итак, вместо этого: import {drag} from 'd3';

Теперь я использую: import * as d3 from 'd3';

Ответ 5

Если вы используете менеджер пакетов пряжи - закажите yarn.lock. Для всех пакетов d3 должна быть прикреплена только одна версия на d3-selection. Например, в моем случае я исправил это вручную, связав все упомянутые пакеты d3-selection с одной версией node_module, например:

[email protected], [email protected]^1.0.1, [email protected]^1.1.0, [email protected], [email protected]^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==