Pertanyaan D3-tip tidak berfungsi dengan webpack


Saya menggunakan webpack dan TypeScript dan sepertinya d3-tip tidak dapat bekerja dengan webpack. Saya mendapatkan error pada acara gerakan mouse "Uncaught TypeError: Cannot read property 'target' of null".

Kesalahan ini terjadi karena d3.event dalam modul d3-tip adalah null.

Saya menyertakan modul sebagai berikut:

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

tapi saya kira d3 di sana dan d3 di modul d3-tip berbeda dan ini adalah sumber masalah, tapi saya tidak tahu cara mengatasinya. Dalam modul d3-tip yang kami miliki:

(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) {
...

Dan ini dikompilasi oleh webpack ke dalamnya

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) {
...

dan sudah jelas bahwa AMD menggunakan. Jika saya bisa mendapatkan pabrik d3-tip, saya akan menyelesaikan masalah itu.


5
2017-09-09 11:58


asal


Jawaban:


berikan elemen target sebagai parameter terakhir ke 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]);
    });

dan d3-tip akan mengambilnya dan menggunakannya sebagai target. Dari sumber:

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

cara lain:

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

3
2018-03-10 14:52



Saya menemukan solusinya. Seperti yang saya pikir webpack menghasilkan banyak contoh dari setiap modul ketika diperlukan. Saya telah menggunakan single-module-instance-webpack-plugin dan itu memecahkan masalah saya.

Anda juga hanya perlu menginisialisasi d3 dalam waktu fisnt di suatu tempat, itu harus seperti file vendor.ts di mana Anda menyertakan pustaka vendor:

// D3 and third-party components
const d3: any = require("d3");
d3.tip = require("d3-tip");

Untuk inisialisasi JS murni akan mudah.


1
2017-09-12 16:28