d3.js d3-drag 0.3.0 -“无法读取空值的属性”按钮“”

hgc7kmma  于 2022-11-12  发布在  其他
关注(0)|答案(7)|浏览(143)

我尝试使用d3-drag与画布这样一个:

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

但是,当我实际尝试拖动时,出现以下错误:

Cannot read property 'button' of null

从d3中的以下行拖动(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的期望之间有一些bug。有什么想法吗?

lx0bsm1f

lx0bsm1f1#

为了完整起见,要实现缩放、移动和拖动,您需要将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

lymgl2op

lymgl2op2#

我在只导入d3-zoom时也遇到了这个错误。通过同时导入d3-zoomd3-selection解决了这个问题:

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

参考:https://github.com/d3/d3-zoom/issues/27

7rtdyuoh

7rtdyuoh3#

对我来说,这是同样的原因:https://github.com/d3/d3-selection/issues/185#issuecomment-419474845
我使用的是Yarn,它添加了两个版本的d3-select。我手动从Yarn.lock中删除了一个,然后它就工作了。

rta7y2nd

rta7y2nd4#

如果你使用纱包管理器- checkout yarn. lock。对于所有的d3包,d3-selection上只有一个版本应该被粘贴。例如,在我的例子中,我通过将所有提到的d3-selection包链接到一个node_module版本来手动修复它,如下所示:

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

x6yk4ghg5#

正确的答案来自这个github问题。将以下代码添加到您的package.json:

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

nlejzf6q6#

我不知道这是否对你有用,但对我来说,问题是因为我没有导入整个d3包,我猜这导致了“事件”未定义。
因此,与其这样:import {drag} from 'd3';
现在我使用的是:import * as d3 from 'd3';

bprjcwpo

bprjcwpo7#

当我将Yarn迁移到npm时,我也遇到了这个问题...
您需要:

  • 删纱.锁
  • 删除package-lock.json
  • 删除节点模块(_M)
  • 运行npm i
  • 运行npm start

一切都很好

相关问题