javascript - typescript D3 v4 导入不工作

Question

我正在尝试在 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 模块，但我已经安装了它，并且根据我读过的内容，我正在正确导入!

Answer 1

与 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';

或类似的，取决于您的需要。

为了方便起见，您可以创建一个简单的“捆绑”模块，以便您可以以更统一的形式访问您的自定义 bundle :

// d3-bundle.ts
export * from 'd3-array';
export * from 'd3-axis';
...
export * from 'd3-time-format';

您可以根据需要定制此模块，包括使用 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
  }
}