Javascript d3拖动0.3.0-“无法读取null的属性“按钮”

我尝试将d3拖动与画布一起使用，例如：

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

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

如果通过指定自己的筛选器删除该函数，则会出现以下错误：

Cannot read property 'sourceEvent' of null

在d3中选择d3源代码

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

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

---

这让我觉得d3拖动和d3选择之间存在一些缺陷。有什么想法吗？

我不知道这是否适用于您，但对我来说，问题在于我没有导入整个d3包，我猜这会导致事件未定义

因此，与此相反： 从'd3'导入{drag}

现在我正在使用：

---

从“d3”导入*作为d3

当我只导入d3缩放时，我也遇到了这个错误。通过导入d3缩放和d3选择解决了此问题：

---

参考资料：

为了完整起见，为了实现缩放、移动和拖动，您需要将导入*替换为“d3”中的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';

---

然后用d3Select替换d3.select，用d3Zoom替换d3.zoom，用d3Drag替换d3.drag，例如用d3Event.transform替换d3.event.transform

对我来说，原因与此相同：

---

我用的是纱线，它增加了两个版本的d3选择。我手动从warn.lock中删除了一个，然后它就工作了。

如果您使用的是纱线包管理器-checkout warn.lock。对于所有d3软件包，只有一个版本的d3选择应该被粘贴。例如，在我的例子中，我通过将所有提到的d3选择包链接到一个node_模块版本来手动修复它，如：

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

---

将以下内容添加到package.json中：

决议：{ d3选择：1.3.0 }

---

正确答案来自：

我在将纱线迁移到npm时也遇到了这个问题

您需要：

删除.lock 删除package-lock.json 删除节点单元模块 运行npm i 运行npm启动

---

这一切都很好

嘿，任何人都能找到有效的答案。我也得到了同样的错误，但没有答案是从工作list@Mallikarjuna遇到了同样的问题。我最初使用的是D35的最新版本，但在降级到d3v4后，它现在可以工作了@konekoya当前我使用的是D3版本4.13.0，你的意思是它能工作吗？不，它不工作我这样做了，但仍然有与OP相同的问题-我还尝试了库存导入*作为“D3”中的D3；还有Object.assign{}，d3，d3Zoom。。。正如文件中建议的那样