TypeScript D3 v4 导入不起作用

Posted 2023-03-13

【中文标题】TypeScript D3 v4 导入不起作用

【英文标题】：TypeScript D3 v4 import not working

【发布时间】：2017-03-11 20:58:50

【问题描述】：

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

【问题讨论】：

import * as d3 from "d3"; 适用于 d3 库的通用导入（import d3 from 'd3'; 不起作用）

【参考方案1】：

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

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

例如：npm install d3-array --save 和 npm install @types/d3-array --save 实际的 d3-array 模块将是一个适当的依赖项（而不是上面您的 sn-p 中出现的 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'; 仅重新导出各个模块的一部分成员

在您现在想使用 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
  

【讨论】：

谢谢@tomwanzek。按照您的建议进行操作后，VS Code 现在可以找到d3-request。但是还是找不到DsvRequest！ According to this CSV 函数返回一个 DsvRequest 定义在 d3-request 否？

其实我觉得命名有问题！当我做npm install @types/d3-request 时，我得到了d3-dsv 打字而不是d3-request 打字！

d3-request 对 d3-dsv 具有依赖关系，定义具有相同的依赖关系。我刚刚通过简单地运行 npm install --save-dev @types/d3-request 在本地创建了一个快速测试，一切都按预期安装。请注意，d3-request 具有方便的包装器，例如获取csv 或tsv 数据时，不要将它们与内置于d3-dsv 中的解析器混淆。定义对应于d3-request。与 D3 v4 相比，D3 v3 中的操作方式发生了一些变化。

我的错。在 VS Code 中，当我使用我的 /// <ref> 时，我的目标是 node_modules 的 d3-request 中的 index.d.ts，因此我的目标是依赖项的定义文件。现在一切都好。谢谢。