0

我正在尝试获得组合d3，nvd3并ng2-nvd3在 Angular 2 项目中使用angular-cli 1.0.0-beta.15.

@types我已经通过 npm安装了相应的包，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",
  }

我包括d3.jsandnv.d3.js以及nv.d3.css（angular-cli.json包被正确捆绑）：

  "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)

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

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

摘自nv.d3.js：

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

在调试的时候，我看到原型没有watchTransition参考...

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

4

1 回答 1

3

好的，设法解决了这个问题。
问题是，当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 {
}
于 2016-11-01T13:14:07.953 回答