首页 > 解决方案 > Angular 升级到 8 后出现拖动事件的问题。(使用 D3)

问题描述

我刚刚将我们的应用程序从 Angular 6 升级到 8(其中包括更新许多依赖项),并且遇到了拖动 d3 节点的问题。升级后,现在每当尝试拖动节点时都会出现此错误:

breadcrumbs.js:64 TypeError: Cannot read property 'ctrlKey' of null
    at SVGRectElement.defaultFilter (drag.js:10)
    at SVGRectElement.mousedowned (drag.js:51)
    at SVGRectElement.<anonymous> (on.js:27)
    at SVGRectElement.sentryWrapped (helpers.js:74)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
    at invokeTask (zone-evergreen.js:1603)
    at SVGRectElement.globalZoneAwareCallback (zone-evergreen.js:1629)

当我查看drag.jschrome 开发工具时,我得到了这个:

import {dispatch} from "d3-dispatch";
import {event, customEvent, select, mouse, touch} from "d3-selection";
import nodrag, {yesdrag} from "./nodrag.js";
import noevent, {nopropagation} from "./noevent.js";
import constant from "./constant.js";
import DragEvent from "./event.js";

// Ignore right-click, since that should open the context menu.
function defaultFilter() {
  return !event.ctrlKey && !event.button;
}
...

如果我在里面断点defaultFilter()并查看event文件顶部的导入,它是一个具有正确目标的事件对象,除了函数(return !event.ctrlKey && !event.button)内的事件对象之外的所有内容都是空的。

此外,我们this.d3.select(this.el.nativeElement).call(this.d3.drag().on('drag', onDrag))在指令中使用将拖动事件侦听器添加到节点。

对此的任何见解将不胜感激!如果您需要更多信息,我很乐意提供更多信息。

标签: javascriptangulard3.js

解决方案


推荐阅读