D3js - 如何在 Angular CLI 中集成像 d3-scale 这样的迷你库？答案

【问题标题】：D3js - How to integrate mini libraries like d3-scale in Angular CLI?D3js - 如何在 Angular CLI 中集成像 d3-scale 这样的迷你库？
【发布时间】：2016-07-13 23:20:16
【问题描述】：

我在 Angular CLI 中为我的项目使用 d3js。我已经在项目中成功集成了 d3js。为了执行我想要创建的内容，我需要 scale 方法。但是，D3js 4.0 已被拆分为迷你库，似乎每个都必须单独集成到项目中。在这里你可以看到 npm install d3 的结果：

node_module_tree

我尝试像这样导入 d3 和 d3-scale：

angular-cli-build.js

vendorNpmFiles: [
  'systemjs/dist/system-polyfills.js',
  'systemjs/dist/system.src.js',
  'zone.js/dist/**/*.+(js|js.map)',
  'es6-shim/es6-shim.js',
  'reflect-metadata/**/*.+(ts|js|js.map)',
  'rxjs/**/*.+(js|js.map)',
  '@angular/**/*.+(js|js.map)',
  '@angular2-material/**/*',
  'bootstrap/**/*',
  'ng2-bootstrap/**/*.js',
  'moment/moment.js',
  'd3/**/*.js',
  'd3-scale/**/*.js'
]

system-config.ts

const map: any = {
 '@angular2-material': 'vendor/@angular2-material',
 'ng2-bootstrap': 'vendor/ng2-bootstrap',
 'moment': 'vendor/moment/moment.js',
 'd3': 'vendor/d3/build/d3.js',
 'd3-scale': 'vendor/d3-scale/build/d3-scale.js'
};

我的组件

import * as d3 from 'd3';
import * as d3Scale from 'd3-scale';

但是即使我的 d3-scale 在 vendor 文件夹中，构建也会失败，他找不到它。

集成这些迷你库的方法是否正确？

谢谢！

【问题讨论】：

你设法运行你的 d3 代码了吗？我的意思是你能注释掉你的import * as d3Scale from 'd3-scale'; 并检查 d3 的错误是否仍然存在？

标签： d3.js angular angular-cli

【解决方案1】：

我发现了我的问题。绝对 Typed 不为 d3js 4.0 提供类型文件，而是为 3.0 版本提供类型文件。

这就是为什么我有： - 可用的方法 d3.scale.linear() 返回未定义（d3 3.0 的类型） - d3 4.0 的库 d3-scale 在构建过程中崩溃

所以我会回到 d3js 3.0，直到他们为 4.0 提供 d.ts 文件。

【讨论】：