这次整理从一份核心间延迟测量数据开始。原始数据适合做离线分析，但排查拓扑关系时，表格会掩盖很多结构特征：同一 CCD 内的延迟、跨 CCD 的跳变、异常核心之间的高延迟都需要靠视觉形状快速定位。
项目概览
结构上，React 入口读取 c2c.csv，矩阵组件负责补全数据和维护交互状态，SVG 渲染层绘制热力网格、坐标轴、图例和悬停提示。
用途是把核心间访问延迟从表格转为可观察拓扑。应用场景包括 NUMA 或 CCD 分组观察、异常核心延迟排查、不同系统设置下的延迟对比。
数据模型
输入数据被压缩成三列：源核心、目标核心、延迟值。页面加载后先生成完整矩阵，缺失单元格以空值保留，再根据实际范围计算颜色。低延迟单元使用冷色，高延迟单元使用暖色，颜色映射采用对数比例，避免少量极端值压扁大部分正常区间。
矩阵图保留横纵坐标、单元格悬停提示和行列高亮。交互层只读取已经规整过的数据结构，渲染层无需理解 CSV 的边界情况。
组件拆分
React 组件分成三个部分：数据解析、色阶计算、SVG 渲染。解析模块负责容错和补齐，色阶模块负责把数值转换成颜色，SVG 组件只关心视图尺寸和坐标映射。
这个拆分让后续替换数据源成本较低。新的测量结果只要转成同样的三列表格，就能沿用相同的视觉呈现。
实现原理是把下三角或稀疏 CSV 补成对称矩阵，再用对数色阶映射延迟值。悬停和核心选择只修改高亮状态，不重新解析数据，因此交互成本较低。