'd3 và 'd3-hexbin' trong nguyên cảo như thư viện toàn cầu

Question

Vì vậy, tôi đang sử dụng d3 và d3-hexbin như thư viện toàn cầu:

<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script> 

... và tham khảo chúng trong .ts như:

/// <reference types="d3" /> 
/// <reference types="d3-hexbin" /> 

... sử dụng định nghĩa DefinitelyTyped. Tuy nhiên, mặc dù công trình này:

const svg = d3.select('#hitmap').append('svg') 

... này:

const hexbin = d3.hexbin().radius(binsize + 1) 

... không thành công với một:

Property 'hexbin' does not exist on type 
    'typeof "/Users/bytter/node_modules/@types/d3/index"' 

Suy nghĩ?

Answer 1

Mặc dù bạn có kiểu gõ cho d3, bạn không có kiểu gõ có nguồn gốc cho d3-hexbin. Vì vậy, bạn đã để rơi trở lại với phương pháp declare như tôi đã làm ở đây cho d3-đám mây: Typings for d3-cloud

Về cơ bản, các bước bạn đã làm theo là những:

1. import thư viện d3 như thường lệ , nhưng cung cấp cho nó một bí danh: import * as D3 from 'd3'; (Lưu ý: Capital D cho D3)

2. declare D3 một lần nữa để bạn có thể sử dụng nó cho hexbin: declare let d3: any;

3. Sử dụng D3 cho mọi thứ liên quan đến thư viện mẹ d3 và d3 để tạo thế hệ hexbin một mình.

const svg = D3.select('#hitmap').append('svg');

const hexbin = d3.hexbin().radius(binsize + 1);

Điều này sẽ ngăn chặn sự editor hiển thị hexbin gợi ý cụ thể và nguyên cảo sẽ không thể để bắt hexbin lỗi loại cụ thể. Nhưng thật không may, cho đến khi bản chính thức đến với hexbin, đây là cách tốt nhất mà tôi đã tìm thấy.