Question

我试图在Angular2项目（核心v2.1.1）中使用ng2-nvd3（https://github.com/krispo/ng2-nvd3），但它无效。

我已将nvD3放入@MgModule的声明中：

  declarations: [
        ...
        TestComponent,
        nvD3,
      ],

我按照描述设置了组件：

import {Component} from '@angular/core';
import {nvD3} from 'ng2-nvd3';
declare let d3:any;

@Component({
    template: '<div><nvd3 [options]="options" [data]="data"></nvd3></div>'
})
export class TestComponent {
    options;
    data;
    ngOnInit(){
        this.options = {
            chart: {
                type: 'discreteBarChart',
                height: 450,
                margin : {
               ...

但是我收到了错误：

EXCEPTION: Uncaught (in promise): Error: Error in ./TestComponent class TestComponent - inline template:0:31 caused by: nv is not defined

我的package.json文件中有nvd3和d3，但我不确定我应该怎么做。

Answer 1

我有类似的问题，虽然不是很好，但请尝试在index.html中包含以下内容：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>

Answer 2

我固定＆＃n; nv未定义＆＃39;通过将这些行添加到我的vendor.ts（供应商依赖项）

import "d3";  
import "nvd3";

Answer 3

您可以在下面的链接中通过一个非常简单的仓库查看工作解决方案。它使用Webpack进行捆绑。

已安装软件包中的相关文件是

/public/stylesheets/nv.d3.min.css (copied from nvd3 node-modules folder)
/assets/nvd3/ng2-nvd3.ts (copied from ng2-nvd3 node-modules folder)
/assets/app/shared/nv.d3.min.js (copied from nvd3 node-modules folder)
(note: my current workaround doesn't use the nvd3.module.ts file)

然后在项目本身，让一切工作：

/views/index.hbd (link to styles)
/assets/app/app.module.ts (declare nvD3)
/assets/app/app.component.ts (import nvD3 and nv.d3.min.js, declare d3)

此设置允许在目标组件中使用nvd3（在本例中为app.component）。

https://github.com/ekuusi/nvd3-ng2-grid-issue

Answer 4

我遇到了同样的问题，发现它只适用于D3版本3，除了已经提到的必要的解决方法。

Answer 5

对于有角度的2 RC6，试试这个:: angular2-nvd3

Angular2 2.1.1上的ng2-nvD3

5 个答案: