在 Angular2 最终项目中使用 d3 和 nvd3，使用 angular-cli beta 15答案

【问题标题】：Working with d3 & nvd3 on an Angular2 final project w/angular-cli beta 15在 Angular2 最终项目中使用 d3 和 nvd3，使用 angular-cli beta 15
【发布时间】：2016-10-31 15:27:55
【问题描述】：

我正在尝试使用 d3、nvd3 和 ng2-nvd3 组合来使用 angular-cli 1.0.0-beta.15 处理 Angular 2 项目。

我已经通过npm安装了对应@types的包，package.json看起来像这样（不相关的包省略）：

  "dependencies": {
    "d3": "3.5.16",
    "ng2-nvd3": "1.1.3",
    "nvd3": "1.8.4",
  },
  "devDependencies": {
    "@types/d3": "0.0.33",
    "@types/nvd3": "1.8.32",
    "angular-cli": "1.0.0-beta.15",
  }

我在angular-cli.json 中包含了d3.js 和nv.d3.js 以及nv.d3.css（包正确捆绑）：

  "styles": [
    "../../../node_modules/nvd3/build/nv.d3.css",
    "styles.scss"
  ],
  "scripts": [
    "../../../node_modules/d3/d3.js",
    "../../../node_modules/nvd3/build/nv.d3.js"
  ],

我创建了一个common 模块用于导入ng2-nvd3（我验证了代码也已捆绑）：

import { NgModule } from "@angular/core";
import { nvD3 } from "ng2-nvd3";

@NgModule({
    declarations: [nvD3],
    exports: [nvD3]
})
export class MyCommonModule {
}

然后，我将common 模块导入到期望使用它的应用程序模块中（在ActivityChartComponent 中）：

@NgModule({
    imports: [PaginationModule, CommonModule, FormsModule, routing, MyCommonModule],
    declarations: [ActivityChartComponent],
    exports: [PlatformComponent]
})
export class PlatformModule {
}

这里是ActivityChartComponent模板（组件代码本身只是计算数据，这里无关）：

<h5 class="card-title">{{title}}</h5>
<span *ngIf="description" class="chart-info">{{description}}</span>
<nvd3 [options]="chart" [data]="data"></nvd3>

我遇到了一个异常（我用“...”屏蔽了堆栈跟踪中的 URL 以保护私有数据）：

TypeError: groups.watchTransition is not a function
    at SVGGElement.<anonymous> (http://localhost:8000/.../nv.d3.js:12243:20)
    at http://localhost:8000/.../main.bundle.js:50272:16
    at d3_selection_each (http://localhost:8000/.../main.bundle.js:50278:30)
    at Array.d3_selectionPrototype.each (http://localhost:8000/.../main.bundle.js:50271:12)
    at Array.chart (http://localhost:8000/.../nv.d3.js:11919:19)
    at Array.d3_selectionPrototype.call (http://localhost:8000/.../main.bundle.js:50285:14)
    at SVGGElement.<anonymous> (http://localhost:8000/.../nv.d3.js:6540:25)
    at http://localhost:8000/.../main.bundle.js:50272:16
    at d3_selection_each (http://localhost:8000/.../main.bundle.js:50278:30)
    at Array.d3_selectionPrototype.each (http://localhost:8000/.../main.bundle.js:50271:12)

为了能够对此进行调试 - 我从 angular-cli.json 中删除了 d3 和 nvd3 引用，并将它们直接导入到 index.html 中。

查看d3 代码，我找不到对watchTransition 的任何引用，但是nvd3 在d3.selection.prototype 上添加了实现。

来自nv.d3.js的sn-p：

d3.selection.prototype.watchTransition = function(renderWatch){
    var args = [this].concat([].slice.call(arguments, 1));
    return renderWatch.transition.apply(renderWatch, args);
};

调试的时候发现原型没有watchTransition引用...

任何想法、线索或信息将不胜感激。

【问题讨论】：

标签： angular d3.js nvd3.js angular-cli ng2-nvd3

【解决方案1】：

好的，设法解决了这个问题。
问题是，当d3 和nvd3 通过angular-cli.json 捆绑时，它们被捆绑到scripts.bundle 和main.bundle 中的应用程序代码中，这显然导致它们具有不同的范围。

我将它们导入公共模块而不是 angular-cli 配置中，这使得所有内容都捆绑在 main.bundle 中。

所以，通用模块现在看起来像这样：

import { NgModule } from "@angular/core";
import "d3";
import "nvd3";
import { nvD3 } from "ng2-nvd3";

@NgModule({
    declarations: [nvD3],
    exports: [nvD3]
})
export class MyCommonModule {
}

【讨论】：