JavaScript 北京地铁线路图
介绍
北京地铁是中国最大的城市轨道交通系统之一，拥有丰富的线路网络。在开发地铁相关的Web应用或者数据可视化时，我们经常需要使用地铁线路图数据进行展示和分析。本文将介绍如何使用 JavaScript 创建一个简单的北京地铁线路图，并展示如何在地铁线路图上添加节点和边。
准备工作
在开始之前，我们需要先准备一些必要的工具和数据：
- [Node.js]( JavaScript 运行环境。
- [D3.js]( 一个用于处理和可视化数据的 JavaScript 库。
- 北京地铁线路数据：可以从[北京地铁线路图]( GitHub 仓库中获取。
创建项目
首先，我们需要创建一个新的项目文件夹，并初始化一个新的 Node.js 项目。打开终端，执行以下命令：
mkdir beijing-subway
cd beijing-subway
npm init -y
这将创建一个名为 beijing-subway 的文件夹，并在其中初始化一个新的 Node.js 项目。
安装依赖
接下来，我们需要安装 D3.js 作为我们的项目依赖。在项目根目录下，执行以下命令：
npm install d3
这将下载并安装 D3.js 到我们的项目中。
导入地铁数据
将下载好的北京地铁线路数据复制到项目文件夹中，并命名为 subway.json。
创建地铁线路图
首先，我们需要在 HTML 中创建一个容器元素来展示地铁线路图。在项目文件夹中创建一个 index.html 文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>北京地铁线路图</title>
<style>
/* 在这里添加一些样式，用于美化地铁线路图 */
</style>
</head>
<body>
<div id="subway"></div>
<!-- 导入 D3.js 库 -->
<script src="node_modules/d3/dist/d3.min.js"></script>
<!-- 导入地铁数据 -->
<script src="subway.json"></script>
<!-- 在这里添加我们的 JavaScript 代码 -->
<script src="main.js"></script>
</body>
</html>
在 HTML 中，我们创建了一个 div 元素，并给它一个唯一的 id：subway。这个 div 元素将用于展示地铁线路图。
接下来，我们需要创建一个 JavaScript 文件 main.js，并在其中编写我们的地铁线路图代码。
添加节点和边
我们将使用 D3.js 来处理和可视化地铁数据。在 main.js 中，添加以下代码：
// 选择地铁容器元素
const subwayContainer = d3.select("#subway");
// 创建一个 SVG 元素，并设置宽度和高度
const svg = subwayContainer.append("svg")
.attr("width", 800)
.attr("height", 600);
// 创建一个用于绘制地铁线路的容器
const linesContainer = svg.append("g");
// 绘制地铁线路
linesContainer.selectAll("line")
.data(subwayData.lines)
.enter()
.append("line")
.attr("x1", d => d.start.x)
.attr("y1", d => d.start.y)
.attr("x2", d => d.end.x)
.attr("y2", d => d.end.y)
.attr("stroke", d => d.color)
.attr("stroke-width", 2);
// 创建一个用于绘制地铁站点的容器
const stationsContainer = svg.append("g");
// 绘制地铁站点
stationsContainer.selectAll("circle")
.data(subwayData.stations)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 5)
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", 2);
在这
