javascript - 从 Github 复制 CSV 链接并将其与导致错误的绘图代码结合起来
问题描述
我正在尝试使用 Vega-Lite 创建地图。
然后我尝试创建一张关于 2019 年降雨量和城市的地图。但是,它根本不会在网页中显示任何地图。这是我的第一个网页设计,我不确定在哪里以及如何调试错误。有谁知道我在哪个部分犯了错误?
调试后错误是这样说的: WARN Loading failed https://github.com/.....csv {},为什么会这样?我不能只复制 Github 上的 CSV 链接吗?
解决方案
当您在浏览器中打开文件时,请查看控制台。您将收到“WARN”、“加载失败”、“data/us-10m.json”
我没有在您的仓库中找到当前文件。
<!DOCTYPE html>
<html>
<head>
<title>My_First_Webpage</title>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vega@5.16.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.16.8"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Vega-Lite Visualization</h1>
<!-- Container for the visualization -->
<div id="vis"></div>
<script>
// Assign the specification to a local variable vlSpec.
var vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 500,
"height": 300,
"layer": [
{
"data": {
"url": "data/us-10m.json",
"format": {
"type": "topojson",
"feature": "states"
}
},
"projection": {
"type": "albersUsa"
},
"mark": {
"type": "geoshape",
"fill": "lightgray",
"stroke": "white"
}
},
{
"data": {
"url": "https://github.com/BocongZhao823/My_First_Webpage-/blob/main/rainfall_tidy.csv"
},
"projection": {
"type": "albersUsa"
},
"mark": "circle",
"encoding": {
"longitude": {
"field": "longitude",
"type": "quantitative"
},
"latitude": {
"field": "latitude",
"type": "quantitative"
},
"size": {"value": 10},
"color": {"value": "steelblue"}
}
}
]
};
// Embed the visualization in the container with id `vis`
vegaEmbed('#vis', vlSpec);
</script>
</body>
</html>
推荐阅读
- c++ - 具有静态成员的 C++ 模板类 - 未定义的引用,而我的静态成员似乎已声明和初始化
- opencv - MXNetError:ImageRec 需要 opencv 来处理
- android-studio - Android Studio 中的 Firebase 符号问题
- css - Flex-wrap 从上一行的垂直端开始
- python - 如何从 json 输出中仅提取一个值?
- r - 为什么 fullrange=TRUE 不适用于 ggplot2 中的 geom_smooth?
- c++ - 使用 std::string 声明一个 std::bitset 数组
- hadoop - 我想知道为什么 Hadoop 包中缺少字数包?
- python - 如何从熊猫中的文件名中提取标签
- git - Gitlab远程:致命:写入错误:设备上没有剩余空间