+
+ 客流密度-里程图
+x=a到x=b之间的面积S表示平均每年有S万人次乘坐火车的里程(km)在a与b之间。
+
+
+ 线路图数据加载中...
+这是参数内容。
"; - this.sidePanel.classList.remove("hidden"); - } - - public init() { - // 监听按钮点击事件，切换内容或收起侧边栏 - this.tabButtons.forEach((button) => { - button.addEventListener("click", () => { - console.log("[LeftSidePanel] button clicked: ", button.id); - // 如果点击的是当前已选中的按钮，收起侧边栏 - if (button.classList.contains("selected")) { - this.sidePanel.classList.add("hidden"); - button.classList.remove("selected"); - this.contentOnShow = undefined; - } else { - // 先移除所有按钮的选中状态 - this.tabButtons.forEach((btn) => btn.classList.remove("selected")); - // 设置当前按钮为选中状态 - button.classList.add("selected"); - - // 根据按钮不同切换第二层侧边栏的内容 - if (button.id === "btn-intro") { - this.sidePanelTitle.innerText = "介绍"; - const introContent = ` -本项目旨在提供可交互的铁路信息可视化分析工具，侧重于分析站点间的最短距离和最短通行时间，以及站点和线路的新建或删除对铁路运行的影响。
-使用指南：
--
-
- 缩放与平移 -
- 鼠标滚轮滚动：放大或缩小视图。 -
- 鼠标左键拖动：平移视图。 -
- 双击鼠标左键：放大视图 -
- 在地图视图下点击省份：聚焦到该省份。再次点击该省份可恢复正常视图。 -
- 在地图视图下点击空白区域：恢复正常视图。 -
- 一般交互（适用于所有视图） -
- 鼠标左键点击站点或线路：在左侧边栏“参数”中显示该站点或线路的属性信息。 -
- 拓扑视图下的额外交互 -
- 鼠标中键单击空白区域：添加节点。 -
- 鼠标左键拖动节点：拖动节点。如果松开鼠标时光标指向另一个节点，则在两点间添加一条边。 -
- 鼠标中键按住并拖动：删除光标经过的边和节点。一个节点只有在没有边连接时才能被删除。 -
- 点击节点：显示该节点的属性信息。 -
- 顶部按钮：用于切换视图。 -
- 地图视图：展示站点地理位置以及铁路连接情况。 -
- 距离拓扑：展示节点间的拓扑连接关系，图中边长与距离成正比。可以在此视图中交互地增删节点和边。 -
- 时间视图：图中边长与通行时间成正比，其余同距离拓扑视图。 -
- 左侧边栏 -
- 介绍：你正在读的这个东西。 -
- 过滤器：用于筛选站点和线路。 -
- 参数：用于显示并编辑站点或铁路路段信息。 -
- 右侧边栏 -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
这是过滤器内容。
"; - this.contentOnShow = "filter"; - } else if (button.id === "btn-params") { - this.sidePanelTitle.innerText = "参数"; - this.sidePanelContent.innerHTML = - "在任意视图中点击选择点或边，以显示并编辑站点或铁路路段信息。
"; - this.contentOnShow = "params"; - } - - // 显示第二层侧边栏 - this.sidePanel.classList.remove("hidden"); - } - }); - }); - - // 监听拖拽事件，调整侧边栏宽度 - this.splitPaneDragger.addEventListener("mousedown", (e) => { - // 阻止默认事件，防止选中内容 - e.preventDefault(); - - // 获取初始鼠标位置和侧边栏的初始宽度 - const initialMouseX = e.clientX; - const initialWidth = this.sidePanel.offsetWidth; - - // 拖拽过程中更新宽度 - const onMouseMove = (moveEvent: MouseEvent) => { - const deltaX = moveEvent.clientX - initialMouseX - 20; // 计算鼠标的水平移动距离 - const newWidth = initialWidth + deltaX; // 更新宽度 - - if (newWidth > 100 && newWidth < 600) { - // 限制宽度范围 - this.sidePanel.style.width = newWidth + "px"; - } - }; - - // 停止拖拽 - const onMouseUp = () => { - document.removeEventListener("mousemove", onMouseMove); - document.removeEventListener("mouseup", onMouseUp); - }; - - document.addEventListener("mousemove", onMouseMove); - document.addEventListener("mouseup", onMouseUp); - }); - console.log(`[${this.constructor.name}] inited.`); - } -} - -export class RightSidePanel { - private sidebar_ids = [ - { button_id: "sidebarButton1", sidebar_id: "sidebar1", dragger_id: "dragger1" }, - { button_id: "sidebarButton2", sidebar_id: "sidebar2", dragger_id: "dragger2" }, - ]; - private buttons: { button: HTMLElement; sidebar: HTMLElement }[]; - - constructor() { - this.buttons = []; - this.sidebar_ids.forEach(({ button_id, sidebar_id, dragger_id }) => { - const button = - document.getElementById(button_id) ?? - (() => { - throw new Error(`按钮${button_id}不存在`); - }).call(this); - const sidebar = - document.getElementById(sidebar_id) ?? - (() => { - throw new Error(`侧边栏${sidebar_id}不存在`); - }).call(this); - this.buttons.push({ button, sidebar }); - }); - - this.buttons.forEach(({ button, sidebar }) => { - button.addEventListener("click", () => { - console.log(sidebar.style.display); - const display = (sidebar.style.display = - sidebar.style.display === "block" ? "none" : "block"); - if (display === "block") d3.select(sidebar).raise(); - }); - }); - - console.log(`[${this.constructor.name}] Constructed.`); - } - - private addDraggable(draggerId: string, sidebarId: string) { - const dragger = - document.getElementById(draggerId) ?? - (() => { - throw new Error(`拖拽元素${draggerId}不存在`); - }).call(null); - const sidebar = - document.getElementById(sidebarId) ?? - (() => { - throw new Error(`侧边栏${sidebarId}不存在`); - }).call(null); - - let isDragging = false; - let startY: number; - let startTop: number; - - dragger.addEventListener("mousedown", (e) => { - isDragging = true; - startY = e.clientY; - startTop = parseInt(window.getComputedStyle(sidebar).top, 10); - e.preventDefault(); - // 将当前侧边栏置顶 - d3.select(sidebar).raise(); - }); - - document.addEventListener("mousemove", (e) => { - if (!isDragging) return; - const deltaY = e.clientY - startY; - const newTop = startTop + deltaY; - sidebar.style.top = `${newTop}px`; - }); - - document.addEventListener("mouseup", () => { - isDragging = false; - }); - } - - public init() { - // 为每个侧边栏添加拖拽事件 - this.sidebar_ids.forEach(({ button_id, sidebar_id, dragger_id }) => { - this.addDraggable(dragger_id, sidebar_id); - }); - - console.log(`[${this.constructor.name}] inited.`); - } -} - -export class TopSidePanel { - // private buttons_ids = ["btn-map-view", "btn-distance-view", "btn-time-view"]; - private buttons_ids = ["btn-map-view", "btn-distance-view"]; - - private buttons: Map
+
+
+
+
+
diff --git a/src/components/DensityCurve.vue b/src/components/DensityCurve.vue
new file mode 100644
index 00000000..a257c095
--- /dev/null
+++ b/src/components/DensityCurve.vue
@@ -0,0 +1,168 @@
+
+
+
+
+
+
+
diff --git a/src/components/DistanceTopology.vue b/src/components/DistanceTopology.vue
new file mode 100644
index 00000000..c90d7ffd
--- /dev/null
+++ b/src/components/DistanceTopology.vue
@@ -0,0 +1,193 @@
+
+
+
+ 以下为节点/边过滤器的状态，可以进行精细调整。
+
+
+
+
+
+
+
+
+
+
+ 本项目旨在提供可交互的铁路信息可视化分析工具，侧重于分析站点间的最短距离和最短通行时间，以及站点和线路的新建或删除对铁路运行的影响。
+使用指南：
+-
+
- 缩放与平移 +
- 鼠标滚轮滚动：放大或缩小视图。 +
- 鼠标左键拖动：平移视图。 +
- 双击鼠标左键：放大视图 +
- 在地图视图下点击省份：聚焦到该省份。再次点击该省份可恢复正常视图。 +
- 在地图视图下点击空白区域：恢复正常视图。 +
- 地图视图交互 +
- 鼠标左键点击站点：选择该站点为起始点。 +
- 鼠标右键点击站点：选择该站点为终止点。 +
- 鼠标左键点击线路：选择该线路。 +
- 鼠标悬停于站点或线路上：显示该站点或线路的属性信息。 +
- 顶部控制栏 +
- 选框：用于切换视图。 +
- 地图视图：展示站点地理位置以及铁路连接情况。 +
- 距离拓扑：力引导图，展示节点间的拓扑连接关系，边引力与距离成正比。 +
- 时间视图：图中边长与通行时间成正比，其余同距离拓扑视图。 +
- 重置视图位置：去除当前的缩放状态。 +
- （仅距离拓扑）重置距离拓扑：将节点位置移到地图位置，并重新开始模拟。 +
- 左侧边栏 +
- 介绍：你正在读的这个东西。 +
- 过滤器：用于精确筛选站点和线路。 +
- 参数：用于显示并编辑站点或铁路路段信息。 +
- 右侧边栏 +
- 距离热力图：显示节点间的最短路径及其长度。 +
- 距离密度图：显示边长度的分布。 +
-
+
-
+
-
+
-
+
-
+
-
+
+
+
+
+
+
+
diff --git a/src/components/MultiGraph.vue b/src/components/MultiGraph.vue
new file mode 100644
index 00000000..ef88f958
--- /dev/null
+++ b/src/components/MultiGraph.vue
@@ -0,0 +1,132 @@
+
+
+
+
+
+ Work Work
+此处的内容正在施工中。
+事实上很容易实现，但是我要揣摩原作者意图。
+
+
+
+
+
+
+
+
diff --git a/src/components/MultiHeatMap.vue b/src/components/MultiHeatMap.vue
new file mode 100644
index 00000000..75bcd333
--- /dev/null
+++ b/src/components/MultiHeatMap.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+ 站点路程-热力图
+表示任意两站之间的最短路程长度(km)。点击以在距离拓扑视图中观察最短路程。
+
+
+ 线路图数据加载中...
+
+
+
+
+
diff --git a/src/components/ObjectEditor.vue b/src/components/ObjectEditor.vue
new file mode 100644
index 00000000..febb09d1
--- /dev/null
+++ b/src/components/ObjectEditor.vue
@@ -0,0 +1,103 @@
+
+
+
diff --git a/src/components/ParamExplorer.vue b/src/components/ParamExplorer.vue
new file mode 100644
index 00000000..9642f0f1
--- /dev/null
+++ b/src/components/ParamExplorer.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+ 没活了可以咬打火机
+我觉得这里应该有个时间热力图，但原作者没做。
+我就是闲着没事改版的，所以我也没做。
+以下为选中的节点/边的参数。
+
+
+ [
+
+
+ ,
+
+
+ ]
+
+
+
+
diff --git a/src/components/UseVNode.vue b/src/components/UseVNode.vue
new file mode 100644
index 00000000..977d2b9a
--- /dev/null
+++ b/src/components/UseVNode.vue
@@ -0,0 +1,13 @@
+
diff --git a/src/components/VisualPanel.vue b/src/components/VisualPanel.vue
new file mode 100644
index 00000000..4c8a0bc6
--- /dev/null
+++ b/src/components/VisualPanel.vue
@@ -0,0 +1,152 @@
+
+
+
+
+
+
+
+
+
+
+ ![]()
![]()
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-