如何将本地html文件放入网页
我正在尝试使用 Vega-Lite 绘制地图。然而，作为一个学生，才刚刚开始自学。有几件事我很困惑。
不知道JavaScript 和 Vega-Lite 的关系？我们可以使用 Vega-Lite 来绘制地图。那么，为了绘制地图，JavaScript 扮演了什么角色呢？
（即以“JavaScript”格式和“Vega-Lite”格式编写代码有什么区别？“Vega-Lite”是一种新的编程语言吗？）（即我试图搜索如何编写 JavaScript 编码，结果看起来很不同于为 Vega-Lite 提供的那个寺庙）我不知道如何将 Vega-Lite 代码与 HTML 代码结合起来（以便放入网页）。我试图在 Vega-Lite 网站 ( https://vega.github.io/vega-lite/tutorials/getting_started.html )上查看神庙。但是，如果我想发布另一个 vega-Lite 而不是给定的示例，我不明白应该更改和组合现有代码的哪一部分（因为他们没有太多评论，我才刚刚开始学习它。
我这里写的下面的代码在网页上没有给我任何'Map'，不知哪里出错了？
# Codes I tried to combine with HTML (This is just a purely Vega-Lite code on its website)
<!DOCTYPE html>
<html>
<head>
<title>Vega-Lite Bar Chart</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>Template for Embedding 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,
"data": {"url": "data/airports.csv"},
"projection": {"type": "albersUsa"},
"mark": "point",
"encoding": {
"longitude": {"field": "longitude", "type": "quantitative"},
"latitude": {"field": "latitude", "type": "quantitative"},
"size": {"value": 10}
},
"config": {"view": {"stroke": "transparent"}}
};
GeoJSON、TopoJSON 和 excel 文件之间有什么关系？ Vega-Lite 支持 TopoJSON。我们还说我们可以使用“excel/csv 文件”作为数据域。那为什么还需要将GeoJSON转为TopoJSON并放入HTML中呢？他们在这里扮演什么角色？如果我的数据集已经包含“经度”和“纬度”以绘制地图，我可以避免这一步吗？（即 GeoJSON、TopoJSON 只是另一种类似于 excel 的数据集吗？）
明月笑刀无情1回答
-
千巷猫影
按顺序回答你的问题：不知道JavaScript和Vega-Lite有什么关系？Vega-Lite 是两件事：一种通过 JSON 指定图表的语法，以及一组 javascript 库来摄取此 JSON 并呈现图表。我不知道如何将 Vega-Lite 代码与 HTML 代码结合起来（以便放入网页）。将 Vega-Lite 图表放在网页上需要将 vega-lite 图表规范（您称之为 Vega-Lite 代码）传递给vega-embed javascript 库（通过 javascript 发生，通常在 HTML 页面中）。您的示例是正确的，只是它引用了可能不存在的本地数据："data": {"url": "data/airports.csv"},将其更改为完整的 vega-datasets URL，图表将呈现在页面上："data": {"url": "https://vega.github.io/vega-datasets/data/airports.csv"}GeoJSON、TopoJSON 和 excel 文件之间有什么关系？这些都是表示数据的不同格式。Vega-Lite 支持 TopoJSON 来指定地理边界；如果您有其他格式的地理数据，则必须将其转换为 TopoJSON 才能与 Vega-Lite 一起使用。请注意，只有地图边界需要 TopoJSON。如果您有包含纬度和经度列的 CSV 或 JSON 数据集，则可以将它们显示在地图背景上，而无需转换为其他格式。
随时随地看视频慕课网APP
相关分类
JavaScript