Question

我使用webpack和TypeScript，似乎d3-tip无法使用webpack。我在鼠标悬停事件上遇到错误 "Uncaught TypeError: Cannot read property 'target' of null"。

发生此错误是因为d3-tip模块中的d3.event为空。

我包含以下模块：

const d3: any = require("d3");
d3.tip = require("d3-tip");

但是我猜d3-tip模块中的d3和d3是不同的，这是问题的根源，但我不知道如何解决它。在d3-tip模块中，我们有：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module with d3 as a dependency.
        define(['d3'], factory)
    } else if (typeof module === 'object' && module.exports) {
        // CommonJS
        var d3 = require('d3')
        module.exports = factory(d3)
    } else {
        // Browser global.
        root.d3.tip = factory(root.d3)
    }
}(this, function (d3) {
...

它由webpack编译成

function(module, exports, __webpack_require__) {

var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// d3.tip
// Copyright (c) 2013 Justin Palmer
//
// Tooltips for d3.js SVG visualizations

(function (root, factory) {
    if (true) {
        // AMD. Register as an anonymous module with d3 as a dependency.
        !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(465)], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__))
    } else if (typeof module === 'object' && module.exports) {
        // CommonJS
        var d3 = require('d3')
        module.exports = factory(d3)
    } else {
        // Browser global.
        root.d3.tip = factory(root.d3)
    }
}(this, function (d3) {
...

很明显，AMD正在使用。如果我能得到d3-tip的工厂，我会解决这个问题。

Answer 1

将目标元素作为最后一个参数传递给tip.show()

var tip = require("d3-tip");
var tooltip = tip().html(d => d.value);
vis.call(tooltip)

vis.append("rect")
    // ...
    .on("mouseover", function() {
        tooltip.show.apply(this, [...arguments, this]);
    });

和d3-tip将拾取并用作目标。来自source：

if (args[args.length - 1] instanceof SVGElement) target = args.pop()

另一种方式：

.on("mouseover", function(d) {
    tooltip.show(d, this);
});

Answer 2

我找到了解决方案。我认为webpack会在需要时生成每个模块的许多实例。我使用了vendor.ts，它解决了我的问题。

您还需要在fisrt time中初始化d3，它应该是// D3 and third-party components const d3: any = require("d3"); d3.tip = require("d3-tip");这样的文件，其中包含供应商库：

Challenger         chdate
----------------------
abc                11-02-2012
aaa                12-02-2012
ccc                12-02-2012
bbb                13-02-2012
ddd                14-02-2012

init_table

Initiateid         indate
----------------------
a1                11-02-2012
a2                11-02-2012
a3                12-02-2012
a4                13-02-2012
a5                13-02-2012

对于纯JS初始化很容易。

d3-tip不适用于webpack

2 个答案: