【发布时间】：2021-08-10 07:40:15
【问题描述】：
我已经使用npm 安装了vega 和vega-lite 和vega-embed，现在我正在按照here 的说明将图表嵌入到我自己的页面中（不在vs 中显示它-code 就像vega-embed 扩展一样）。
我在 Angular 应用程序 中编写了以下代码，该代码会引发错误：
vega.component.html
<h3 class="center">Vega Viz</h3>
<figure id="vega" class="center"></figure>
vega.component.ts
import { Component, OnInit } from '@angular/core';
import embed from 'vega-embed';
import * as d3 from 'd3';
@Component({
selector: 'app-vega',
templateUrl: './vega.component.html',
styleUrls: ['./vega.component.css']
})
export class VegaComponent implements OnInit {
svg: any;
margin = 50;
width = 750 - (this.margin * 2);
height = 400 - (this.margin * 2);
constructor() { }
ngOnInit(): void {
this.createSvg();
this.embedGraph();
}
createSvg(): void {
this.svg = d3
.select("figure#vega")
.append("svg")
.attr("width", this.width + (this.margin * 2))
.attr("height", this.height + (this.margin * 2))
.append("g")
.attr("transform", "translate(" + this.margin + "," + this.margin + ")");
}
async embedGraph(): Promise<void> {
const spec = "/assets/density-heatmaps.vg.json";
embed.vegaEmbed("figure#vega", spec);
const result = await embed("figure#vega", spec);
console.log(result.view);
}
}
我将其中一个示例 density-heatmaps.vg.json 放在我的 Angular 的 assets 文件夹中，并希望在我的 http://localhost:4200 页面中显示它。
起初，我认为是导致错误的主要代码，但后来我意识到实际上是顶部的 import 行导致我的应用程序崩溃...
有人可以帮我理解为什么 import 语句会导致应用程序崩溃以及我该如何解决它吗？
之后，我可以继续编写我的代码并希望图形显示在我的html figure 区域中...
顺便说一句，我尝试了import embed from 'vega-embed' 和import * as embed from 'vega-embed'，但都使应用程序崩溃。我将不胜感激。
p.s.这是我的检查控制台的屏幕截图：
我搜索了allowSyntheticDefaultImports，认为这是一个我可以设置为 true 以允许导入的标志，但我在应用程序中什么也没找到...
我的配置文件内容如下：
package.json
{
"name": "a-chis-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"bootstrap": "^5.1.0",
"d3": "^7.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"vega": "^5.20.2",
"vega-embed": "^6.18.2",
"vega-lite": "^5.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.0",
"@angular/cli": "~12.2.0",
"@angular/compiler-cli": "~12.2.0",
"@types/d3": "^7.0.0",
"@types/jasmine": "~3.8.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.3.5"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strictNullChecks": false,
"strict": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"suppressImplicitAnyIndexErrors": true,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
"noImplicitAny": false
}
}
【问题讨论】：
-
您能否在 Stackblitz 等孤立环境中创建问题的最小版本？我尝试在 Angular 启动器中导入 + 安装 vega-embed，它可以工作：a.cl.ly/xQu6ZmmR / stackblitz.com/edit/angular-8-getting-started-s3qsnr 如果不访问您的代码，构建问题很难调试：您可以发布 package.json 或任何与构建相关的配置（如 tsconfig .json）？您可能还需要安装 vega 和 vega-lite 作为对等依赖项，如果您刚刚安装 vega-embed，它们不会自动提供。
-
感谢您的回复。当您说“它有效”时，您的意思是您创建了一个新的 Angular 项目，以及一个 vega
ts和html，并且您的导入和脚本中的那个方法都可以正常工作吗？顺便说一句，正如我在帖子中提到的那样，我已经安装了所有依赖项。我会尽快添加配置文件...谢谢 -
“它可以工作”，我只是说 vega-embed 正在导入而不会产生错误。很高兴听到您能够找到解决方案！
标签： angular vega-lite vega vegas-viz vega-embed