Angular v12：Uncatch(in promise)：ReferenceError：d3 is not defined ReferenceError：d3 is not defined

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

npm i d3@^3.5.17

因为这是nvd3似乎支持的版本

如果这不起作用.包括脚本导入，如下所示！

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css"
/>

然后我们可以使用下面的代码，创建一个基本的图表

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div id='chart' class='span4'>
        <svg style='height:500px;width:100%'> </svg>
    </div>
  `,
})
export class App {
  chartdata!: { label: string; value: number }[];

  height = 350;
  width = 350;
  chart2: any;

  testdata = [
    { key: 'One', y: 5 },
    { key: 'Two', y: 2 },
    { key: 'Three', y: 9 },
    { key: 'Four', y: 7 },
    { key: 'Five', y: 4 },
    { key: 'Six', y: 3 },
    { key: 'Seven', y: 0.5 },
  ];

  ngOnInit(): void {
    this.chartdata = [
      { label: 'test', value: 20 },
      { label: 'test2', value: 20 },
      { label: 'test3', value: 20 },
      { label: 'test4', value: 20 },
    ];
    this.drawchart();
  }

  drawchart() {
    const nv = (window as any)['nv'];
    nv.addGraph(() => {
      const chart2 = nv.models
        .pieChart()
        .x(function (d: any) {
          return d.key;
        })
        .y(function (d: any) {
          return d.y;
        })
        //.labelThreshold(.08)
        //.showLabels(false)
        .width(this.width)
        .height(this.height)
        .donut(true)
        .id('donut2')
        .titleOffset(-30)
        .title('woot');

      // MAKES IT HALF CIRCLE
      chart2.pie
        .startAngle(function (d: any) {
          return d.startAngle / 2 - Math.PI / 2;
        })
        .endAngle(function (d: any) {
          return d.endAngle / 2 - Math.PI / 2;
        });
      const d3 = (window as any)['d3'];
      d3.select('#chart svg')
        //.datum(historicalBarChart)
        .datum(this.testdata)
        .transition()
        .duration(1200)
        .call(chart2);

      return chart2;
    });
  }
}

bootstrapApplication(App);

Stackblitz Demo