Question

我需要显示一个量规图，已成功编译组件，但该图表未显示，并且显示控制台错误。

错误ReferenceError：“未定义d3”量规

http://localhost:4200/main.js:129:17drawhttp://localhost:4200/main.js:245:26ngOnInithttp://localhost:4200/main.js:109:9checkAndUpdateDirectiveInlinehttp://localhost:4200/vendor.js:40334:9checkAndUpdateNodeInlinehttp://localhost:4200/vendor.js:41598:20checkAndUpdateNodehttp://localhost:4200/vendor.js:41560:16prodCheckAndUpdateNodehttp://localhost:4200/vendor.js:42100:5View_AppComponent_Host_0ng:///AppModule/AppComponent_Host.ngfactory.js:8:5updateDirectiveshttp://localhost:4200/vendor.js:41889:63checkAndUpdateViewhttp://localhost:4200/vendor.js:41542:5detectChangeshttp://localhost:4200/vendor.js:39929:13tickhttp://localhost:4200/vendor.js:35665:58tickhttp://localhost:4200/vendor.js:35665:13_loadComponenthttp://localhost:4200/vendor.js:35699:9bootstraphttp://localhost:4200/vendor.js:35641:9_moduleDoBootstraphttp://localhost:4200/vendor.js:35442:74_moduleDoBootstraphttp://localhost:4200/vendor.js:35442:13bootstrapModuleFactoryhttp://localhost:4200/vendor.js:35408:21invokehttp://localhost:4200/polyfills.js:2710:17onInvokehttp://localhost:4200/vendor.js:34908:24invokehttp://localhost:4200/polyfills.js:2709:17runhttp://localhost:4200/polyfills.js:2460:24scheduleResolveOrRejecthttp://localhost:4200/polyfills.js:3194:29invokeTaskhttp://localhost:4200/polyfills.js:2743:17onInvokeTaskhttp://localhost:4200/vendor.js:34899:24invokeTaskhttp://localhost:4200/polyfills.js:2742:17runTaskhttp://localhost:4200/polyfills.js:2510:28drainMicroTaskQueuehttp://localhost:4200/polyfills.js:2917:25

Answer 1

您可以尝试import d3 from 'd3';

Stackblitz Demo

npm install d3-保存

import { Component } from '@angular/core';
import d3 from 'd3';

@Component({...})
export class AppComponent {
    gaugemap: any = {};
    ngOnInit(){
        console.log(d3)
    }
}

Refrence URL

Answer 2

尝试angular.json

“脚本”：[ “ ./node_modules/d3/dist/d3.min.js” ]

在您的组件中

 import * as d3 from "d3";

那么您将能够在组件中以及调试期间正确调用它，而不会出现任何错误

错误ReferenceError：“未定义d3”

2 个答案: