访问 Vega 数据集的外部 url

Question

我已经将 Vega 和 Vega-Lite 嵌入到我的 Angular 应用程序中，我可以直接在我自己的 html 页面上显示它们。

我采用的一些示例包含指向外部数据文件的链接，我已按照 this 页面上的说明使用 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"
                    }
                }
            }
        }
    ]
}

"url": "../node_modules/vega-datasets/data/miserables.json" 的 2 个实例实际上曾经是在线 Vega 编辑器中的 "url": "data/miserables.json"，但是因为我已经将内容复制到一个文件中并将其放在我的 Angular 应用程序中assets 文件夹，我相应地修改了路径。

或者至少我认为是相应地完成的！

图表没有显示，所以我怀疑我做的路径调整错误。

有人可以帮我理解我做错了什么图表没有显示吗？

这是我的 Angular 项目层次结构的屏幕截图：

数据集安装在 node_modules/vega-datasets/data/ 和我的

的文件夹中

Answer 1

我在 vega slack 频道上了解到，从节点模块提供文件（通常）是不好的做法，因此请务必将它们复制到（例如）您的 assets 文件夹中。

如果您这样做并将 json 文件复制到您的本地 assets 目录中，那么您需要做的就是用以下内容替换您的两个 url：

"url": "/assets/miserables.json"

访问 Vega 数据集的外部 url

Accessing external url of vega data sets

angular

vega-lite

vega

vegas-viz

vega-embed