项目背景

某重点研发计划

课题名称：前策划多维度、定量化指标体系与使用后评估指标的映射关系研究

研究内容：指标体系梳理优化：基于80%指标可追溯的要求，从评价的目标、特性、量化等维度对建筑策划预评价指标体系和后评估指标体系进行分类梳理和优化；指标对应关系构建：基于指标体系的梳理优化，构建前策划预评价指标体系与后评估指标体系的对应关系假设。

项目概述

建筑指标关系网络图可视化工具 是一个基于Web的交互式数据可视化应用，专门用于展示和分析建筑领域的前策划指标与使用后评估指标之间的关联关系。该工具采用力导向网络图（Force-directed Graph）直观呈现指标间的相互影响，支持用户通过多种方式导入数据并动态探索指标网络。

核心功能

1. 灵活的数据导入方式

• CSV文件上传：直接上传符合格式的CSV文件
• 路径输入：粘贴本地文件路径（受浏览器安全限制，建议使用上传方式）
• 数据粘贴：直接从Excel复制CSV数据并粘贴到文本区域
• 示例数据：一键加载内置的示例数据（124个前策划指标 + 156个后评估指标 + 映射关系数据）
• 拖拽支持：将CSV文件拖拽到上传区域即可加载

2. 智能关系可视化

• Top-N关系展示：选择任一前策划指标后，自动显示：

  • 最相关的5个前策划指标
  • 最相关的5个后评估指标
  • 每个前指标的top 3后评估指标

• 多层级网络：同时展示直接关系和间接关系，形成完整的指标影响网络

• 关系强度编码：连线颜色和粗细代表关系强度（使用Turbo色彩映射）

3. 丰富的交互功能

• 节点选择：点击左侧指标列表或图中节点可切换中心节点
• 拖拽布局：可任意拖拽节点调整布局，力导向算法自动优化
• 缩放平移：支持鼠标滚轮缩放和拖拽平移整个画布
• 悬停提示：鼠标悬停在节点上显示详细信息（指标ID、名称、类型、关系数）
• 视图重置：一键恢复初始布局

4. 可视化定制选项

• 连线样式：直线、曲线、阶梯线三种连线样式
• 显示控制：显示/隐藏方向箭头、节点标签
• 节点样式：不同颜色区分前策划指标（橙色）和后评估指标（灰色），当前选中节点高亮（红色）

技术实现

技术栈

• 前端框架：原生HTML5 + CSS3 + JavaScript
• 可视化库：D3.js v7（力导向图、缩放、拖拽等交互）
• 响应式设计：适配不同屏幕尺寸，侧边栏+主视图布局
• 无后端依赖：纯前端应用，所有数据处理在浏览器完成

文件结构

单文件HTML应用，包含：

• HTML结构：侧边栏控制面板 + 主可视化区域
• 内联CSS：完整的样式定义（布局、颜色、动画、响应式）
• 内联JavaScript：数据解析、网络图渲染、交互逻辑

数据格式要求

CSV文件需符合特定格式：

1. 第一行：前策划指标的ID（简称），从第三列开始

2. 第二行：前策划指标的名称，与第一行对应

3. 后续行：每行代表一个指标（前或后），包含：

   • 第一列：指标ID
   • 第二列：指标名称
   • 后续列：与前策划指标的关系强度值（数值型）

示例格式：

,,,        A1      A2     A3
,,,       前指标1 前指标2 前指标3
A1前指标1  0.8    0.5     0.3
B1后指标1  0.6    0.2     0.9

使用场景

1. 建筑指标研究：分析前策划指标对使用后评估的影响路径
2. 教学演示：可视化展示建筑指标间的复杂关系
3. 数据探索：快速发现关键指标和强关联关系
4. 项目汇报：生成直观的网络图用于展示分析结果

项目特点

• 用户友好：界面简洁，操作直观，无需编程经验
• 高性能：优化力导向算法，支持数百个节点的流畅交互
• 可扩展：模块化代码结构，便于添加新功能
• 跨平台：支持所有现代浏览器（Chrome、Firefox、Edge等）

注意事项

• 由于浏览器安全限制，直接粘贴文件路径可能无法读取，建议使用文件上传或数据粘贴
• 大型数据集（超过500个节点）可能需要较长的初始渲染时间
• 网络图布局是动态的，每次加载可能略有不同

部署说明

1. 将HTML文件上传到任何Web服务器或GitHub Pages
2. 无需安装任何依赖，直接浏览器打开即可使用
3. 确保CSV数据文件与HTML文件在同一域名下（或通过上传方式加载）

这个工具为建筑指标分析提供了一个强大而直观的可视化平台，特别适合研究人员、学生和从业者探索和理解指标间的复杂关系。