Angular v12：未捕获（承诺中）：ReferenceError：d3 未定义 ReferenceError：d3 未定义

Question

Angular v12，尝试使用 d3、nvd3（不是 ng2-nvd3）。编译没问题，但是运行时出错。

default-node_modules_d3_src_index_js.js:2 ERROR 错误：未捕获（在 Promise): ReferenceError: d3 未定义 ReferenceError: d3 未定义 定义的 在 nv.d3.js:18:7 在 75301 (nv.d3.js:15671:2) 在 webpack_require （引导程序：19：1） 在 89275 (src_app_mypage_module_ts.js:15:62) 在 webpack_require （引导程序：19：1） 位于 13111 (pageone.component.html:2:39) 在 webpack_require （引导程序：19：1） 在函数中。webpack_require（引导程序：19：1） 在 _ZoneDelegate.invoke (zone.js:368:26) 在resolvePromise (zone.js:1193:31) 在resolvePromise (zone.js:1147:17) 在 zone.js:1260:17 在 _ZoneDelegate.invokeTask (zone.js:402:31) 在 core.mjs:25948:55 在 AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25948:36) 在 _ZoneDelegate.invokeTask (zone.js:401:60) 在 Object.onInvokeTask (core.mjs:26249:33) 在 _ZoneDelegate.invokeTask (zone.js:401:60) 在 Zone.runTask (zone.js:173:47)

这是完成的事情：

npm install d3
npm install nvd3
npm install @types/d3 --save-dev
npm install @types/nvd3 --save-dev

组件.HTML：

<div id='chart' class='span4'>
    <svg style='height:500px;width:100%'> </svg>
</div>

.TS:

import * as d3 from 'd3';  
import * as nv from 'nvd3';  

ngOnInit(): void 
{
    this.myservice.subscribe(resp=> {
        this.chartdata = resp.data;
        this.drawchart();
    });
}
  
drawchart()
{
    nv.addGraph(()=> {
    var chart = nv.models.pieChart()
      .x((d) => { return d.label })
      .y((d) => { return d.value })
      .showLabels(true)
      .donut(true)         
      .labelThreshold(0.001) 
      .labelType("key").donutRatio(0.60); 

    d3.select("#chart svg")
        .datum(this.chartdata)
        .call(chart as any);
    ...
    });
}

Answer 1

确保您使用以下命令安装了 d3

npm i d3@^3.5.17

因为这是

nvd3

似乎支持得很好的版本