[英]TypeScript D3 v4 import not working
我正在尝试在D3之上构建一个小型JS库以绘制折线图。 我对整个场景还很陌生,但是我认为我应该跳入“深层结局”来最好地学习。
这是我的package.json
的内容
{
"name": "d3play02",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"d3-array": "^1.0.1",
"d3-axis": "^1.0.3",
"d3-request": "^1.0.2",
"d3-scale": "^1.0.3",
"d3-selection": "^1.0.2",
"d3-shape": "^1.0.3",
"d3-time-format": "^2.0.2",
"rollup": "^0.36.3",
"rollup-plugin-node-resolve": "^2.0.0",
"uglify-js": "^2.7.4"
},
"dependencies": {
"@types/d3": "^4.2.37"
}
}
我有一个名为LineChart.ts
的文件,并且在其中:
/// <reference path="node_modules/@types/d3/node_modules/@types/d3-request/index.d.ts" />
import csv from 'd3-request';
class LineChart {
data(url: string): DsvRequest {
// code to go here
}
}
但这给我一个错误
它抱怨它找不到d3-request
模块,但是我已经安装了该模块,并且根据我读到的内容,我正在正确导入!
您与d3有关的npm安装应如下:
如果仅打算使用模块的子集,则需要为每个模块安装模块本身和相应的定义文件。
例如: npm install d3-array --save
和npm install @types/d3-array --save
实际的d3-array模块将是适当的依赖项(而不是上面代码段中显示的devDependency)。 @types中的定义可能是--save
或--save-dev
,具体取决于您的用例(对于其他代码使用的库,应使用适当的依赖项)
如果要将D3模块与模块加载器一起使用,则可以导入标准TypeScript语法:
import * as d3Array from 'd3-array';
import {select, Selection} from 'd3-selection';
或类似,取决于您的需求。
为了方便起见,您可以创建一个简单的“捆绑”模块,以便以更统一的形式访问您的自定义捆绑:
// d3-bundle.ts
export * from 'd3-array';
export * from 'd3-axis';
...
export * from 'd3-time-format';
您可以根据需要定制此模块,包括使用export {...} from 'd3-MODULE';
仅重新导出各个模块成员的一部分export {...} from 'd3-MODULE';
在您现在想使用D3的任何模块中,您都将使用适当的相对路径导入“ d3-bundle”,并且可以访问通过捆绑桶放置的内容:
// use-d3.ts
import { csv, DsvRequest } from './d3-bundle'; // again, use the right relative path for your project
class LineChart {
data(url: string): DsvRequest {
// code to go here
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.