Javascript TypeScript D3 v4导入不工作

Javascript TypeScript D3 v4导入不工作,javascript,d3.js,typescript,typescript-typings,Javascript,D3.js,Typescript,Typescript Typings,我正试图在D3上构建一个小的JS库来绘制一个折线图。我对整个场景还不太熟悉,但我认为在“最深处”跳会学得最好 这是我的package.json的内容 { "name": "d3play02", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },

我正试图在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请求”导入csv;
类线图{
数据(url:字符串):DsvRequest{
//代码转到这里
}
}
但这给了我一个错误


它抱怨说它找不到
d3请求
模块,但我已经安装了它,根据我读到的内容,我正在正确导入

与d3相关的npm安装应如下所示:

如果只打算使用模块的一个子集,则对于每个模块,您需要安装模块本身和相应的定义文件

例如:
npm install d3 array--save
npm install@types/d3 array--save
实际的d3 array模块将是一个适当的依赖项(而不是上面代码片段中显示的依赖项)。@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';
您可以根据自己的需要定制此模块,包括使用“d3模块”中的
export{…}重新导出单个模块的一部分成员

在您现在想要使用D3的任何模块中,您都可以使用适当的相对路径导入“D3 bundle”,并且您可以访问通过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
  }
}

谢谢@tomwanzek。按照您的建议执行后,VS代码现在可以找到d3请求。但是它仍然找不到
DsvRequest
!CSV函数返回一个
DsvRequest
,它是在
d3请求中定义的
no?事实上,我认为命名有问题!当我执行
npm安装@types/d3请求时
我得到的是打字而不是打字!d3请求对d3 dsv具有依赖性,定义具有相同的依赖性。我只是在本地创建了一个快速测试,只需运行
npm安装--save dev@types/d3 request
everything按预期安装。注意,d3请求具有方便的包装器,例如获取
csv
tsv
数据,不要将其与内置于d3 dsv中的解析器混淆。这些定义与此相对应。与D3V4相比,D3V3中的操作方式有一些变化。我的错。在VS代码中,当我执行//时,我的目标是d3请求的节点模块中的索引.d.ts,因此我的目标是依赖项的定义文件。现在一切都好了。谢谢。
从“d3”导入*为d3适用于d3库的常规导入(
从“d3”导入d3;
将不起作用)