TypeScript D3 v4导入不工作 [英] TypeScript D3 v4 import not working

问题描述

我试图在D3之上构建一个小JS库以绘制折线图。我对整个场景都很新鲜，但我认为我最好通过跳跃在深端。

这里是我的 package.json

  {
name：d3play02 
version：1.0.0，
description：，
main：index.js，
scripts：{
test：echo \错误：未指定测试\&& ：，
license：ISC，
devDependencies：{
d3-array：^ 1.0.1，
d3轴：^ 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 {
 //这里的代码
} 
} 
  

但这是给我一个错误，说这

抱怨它找不到 d3-request 模块，我已经安装并根据我阅读的东西，我正在导入正确！

任何帮助将非常感激。

如果你打算只使用一个子集

例如： npm install d3-array - 对于每个模块，需要安装模块本身和相应的定义文件。保存和 npm install @ types / d3-array --save 实际的d3-数组模块将是一个合适的依赖出现在上面的代码段中）。从@types的定义可能是 - save 或 - save-dev 取决于您的用例

当你想使用模块加载器来使用D3模块时，你可以导入标准的TypeScript语法：

 从'd3-array'导入d3Array; 
 import {select，Selection} from'd3-selection'; 
  

或类似，视您的需要。

为方便起见，您可以创建一个简单的捆绑模块，以便您可以以更合并的形式访问自定义捆绑包：

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

您可以根据需要定制此模块，包括仅重新导出从'd3-MODULE'中使用 export {...}的单个模块;

现在使用D3，你将使用一个适当的相对路径导入'd3-bundle'，你将可以访问你通过束桶：

  // use-d3.ts 
 import {csv，DsvRequest} from'./d3-bundle'; //再次，为你的项目使用正确的相对路径
 
 class LineChart {
 data（url：string）：DsvRequest {
 //代码到这里
 } 
} 
  

I am trying to build a tiny JS library on top of D3 to draw a line chart. I am fairly new to the whole scene, but I thought I'd learn best by jumping in the "deep end".

Here is the content of my 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"
  }
}

I have a file called LineChart.ts and in there I have:

/// <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
    }
}

But this is giving me an error saying this

It is complaining that it can't find the d3-request module, but I have that installed and based on the stuff I've read, I am importing correctly!

Any help would be greatly appreciated.

解决方案

Your npm installs related to d3 should be as follows:

If you intend to use only a subset of the modules, for each module you need to install the module itself and the corresponding definition file.

E.g.: npm install d3-array --save and npm install @types/d3-array --save The actual d3-array module will be a proper dependency (not a devDependency as it appears in your snippet above). The definitions from @types may be --save or --save-dev that depends on your use case (for a library used by other code, a proper dependency should be used)

When you want to use the D3 modules with a module loader, you can then import standard TypeScript syntax:

import * as  d3Array from 'd3-array';
import {select, Selection} from 'd3-selection';

Or similar, depending on your needs.

For convenience you could create a simple "bundling" module so that you can access your custom bundle in a more consolidated form:

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

You can tailor this module to your needs, including re-exporting only a subset of the members of the individual modules using export {...} from 'd3-MODULE';

In whatever module you want to use D3 now, you would import 'd3-bundle' using an appropriate relative path and you will have access to what you put through the bundle barrel:

// 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
  }
}

这篇关于TypeScript D3 v4导入不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！