d3-tip không hoạt động với webpack

Question

Tôi sử dụng webpack và TypeScript và có vẻ như d3-tip không thể hoạt động với webpack. Tôi gặp lỗi về các sự kiện di chuột "Uncaught TypeError: Cannot read property 'target' of null".

Lỗi này xảy ra vì d3.event trong mô-đun d3-tip là rỗng.

tôi bao gồm các module như sau:

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

nhưng tôi đoán rằng D3 ở đó và d3 trong module d3-tip là khác nhau và đây là nguồn gốc của vấn đề, nhưng tôi không biết làm thế nào để giải quyết nó. Trong mô-đun d3-tip ta có:

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

Và nó biên dịch bởi webpack vào

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

và rõ ràng là AMD đang sử dụng. Nếu tôi có thể nhận được nhà máy của d3-tip tôi sẽ giải quyết vấn đề đó.

Answer 1

Tôi đã tìm ra giải pháp. Như tôi nghĩ webpack sản xuất nhiều trường hợp của mỗi mô-đun khi nó được yêu cầu. Tôi đã sử dụng single-module-instance-webpack-plugin và nó đã giải quyết được vấn đề của tôi.

Bạn cũng chỉ cần khởi d3 trong thời gian fisrt ở đâu đó, nó phải là tập tin như vendor.ts nơi bạn bao gồm các thư viện nhà cung cấp:

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

Đối khởi JS tinh khiết sẽ được dễ dàng.

Answer 2

vượt qua các yếu tố mục tiêu như các tham số cuối cùng để 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]); 
    }); 

và d3-tip sẽ nhặt nó lên và sử dụng như mục tiêu. Từ source:

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

cách khác:

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