我已经嵌入Vega到Vega-Lite我的 Angular 应用程序中，我可以直接在我自己的html页面上显示它们。
我采用的一些示例包含指向外部数据文件的链接，这些文件我已按照此页面npm i vega-datasets上的说明下载并安装在我的应用程序中。
miserables.json以下是使用该文件的弧形图示例：
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An arc diagram depicting character co-occurrence in the novel Les Misérables.",
"width": 770,
"padding": 5,
"data": [
{
"name": "edges",
"url": "../node_modules/vega-datasets/data/miserables.json",
"format": {
"type": "json",
"property": "links"
}
},
{
"name": "sourceDegree",
"source": "edges",
"transform": [
{
"type": "aggregate",
"groupby": [
"source"
]
}
]
},
{
"name": "targetDegree",
"source": "edges",
"transform": [
{
"type": "aggregate",
"groupby": [
"target"
]
}
]
},
{
"name": "nodes",
"url": "../node_modules/vega-datasets/data/miserables.json",
"format": {
"type": "json",
"property": "nodes"
},
"transform": [
{
"type": "window",
"ops": [
"rank"
],
"as": [
"order"
]
},
{
"type": "lookup",
"from": "sourceDegree",
"key": "source",
"fields": [
"index"
],
"as": [
"sourceDegree"
],
"default": {
"count": 0
}
},
{
"type": "lookup",
"from": "targetDegree",
"key": "target",
"fields": [
"index"
],
"as": [
"targetDegree"
],
"default": {
"count": 0
}
},
{
"type": "formula",
"as": "degree",
"expr": "datum.sourceDegree.count + datum.targetDegree.count"
}
]
}
],
"scales": [
{
"name": "position",
"type": "band",
"domain": {
"data": "nodes",
"field": "order",
"sort": true
},
"range": "width"
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {
"data": "nodes",
"field": "group"
}
}
],
"marks": [
{
"type": "symbol",
"name": "layout",
"interactive": false,
"from": {
"data": "nodes"
},
"encode": {
"enter": {
"opacity": {
"value": 0
}
},
"update": {
"x": {
"scale": "position",
"field": "order"
},
"y": {
"value": 0
},
"size": {
"field": "degree",
"mult": 5,
"offset": 10
},
"fill": {
"scale": "color",
"field": "group"
}
}
}
},
{
"type": "path",
"from": {
"data": "edges"
},
"encode": {
"update": {
"stroke": {
"value": "#000"
},
"strokeOpacity": {
"value": 0.2
},
"strokeWidth": {
"field": "value"
}
}
},
"transform": [
{
"type": "lookup",
"from": "layout",
"key": "datum.index",
"fields": [
"datum.source",
"datum.target"
],
"as": [
"sourceNode",
"targetNode"
]
},
{
"type": "linkpath",
"sourceX": {
"expr": "min(datum.sourceNode.x, datum.targetNode.x)"
},
"targetX": {
"expr": "max(datum.sourceNode.x, datum.targetNode.x)"
},
"sourceY": {
"expr": "0"
},
"targetY": {
"expr": "0"
},
"shape": "arc"
}
]
},
{
"type": "symbol",
"from": {
"data": "layout"
},
"encode": {
"update": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"fill": {
"field": "fill"
},
"size": {
"field": "size"
}
}
}
},
{
"type": "text",
"from": {
"data": "nodes"
},
"encode": {
"update": {
"x": {
"scale": "position",
"field": "order"
},
"y": {
"value": 7
},
"fontSize": {
"value": 9
},
"align": {
"value": "right"
},
"baseline": {
"value": "middle"
},
"angle": {
"value": -90
},
"text": {
"field": "name"
}
}
}
}
]
}
这 2 个实例"url": "../node_modules/vega-datasets/data/miserables.json"实际上曾经"url": "data/miserables.json"位于在线 Vega 编辑器中，但由于我已将内容复制到一个文件中并将其放置在我的 Angular 应用程序的assets文件夹中，因此我相应地修改了路径。
或者至少我认为它是相应地完成的！
图表没有显示，所以我怀疑我做错了路径调整。
有人可以帮我理解图表没有显示的我做错了什么吗？
这是我的 Angular 项目层次结构的屏幕截图：
数据集安装在node_modules/vega-datasets/data/我的文件夹中