核心是将原始数据准确映射为图形参数，需经数据清洗、坐标系与比例尺计算、动态统计三步：清洗包括补全空值、单位转换、时间标准化和分类编码；比例尺用scalelinear/scaleband映射值到像素，并预留padding；动态统计含滚动平均、同比环比等衍生指标。

核心在于把原始数据准确映射为图形参数，而不是直接画图。数值处理是可视化背后真正的逻辑层，决定了图表是否真实、可读、可交互。

数据清洗与结构标准化

原始数据常含空值、异常值或单位不一致。必须先统一处理：

• 过滤掉 null/undefined 或用均值、前向填充补全
• 将字符串数值（如 "12.5万"）转为数字：用正则提取数字再乘以对应倍数
• 时间字段统一转为 Date 对象或时间戳，便于排序和轴计算
• 分类字段做去重+索引映射，例如 { "华北": 0, "华东": 1 }，方便后续坐标定位

坐标系与比例尺计算

Canvas 或 SVG 绘图前，必须把数据值转为像素位置。这依赖两个关键函数：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

• scaleLinear(domain, range)：线性映射，如销售额 [0, 100] → y 像素 [350, 50]（注意 canvas y 轴向下）
• scaleBand()：用于分类轴，自动分配柱子宽度和间距，避免手动算 margin
• 最大最小值不能只取原始数组极值——要预留 padding（如 +5%），防止标签被截断
• 多组数据共用坐标轴时，domain 应取所有系列的全局 min/max，否则对比失真

动态统计与衍生指标生成

真正体现“复杂”的地方，往往不在绘图，而在数值加工：

• 滚动平均：用滑动窗口计算 7 日/30 日均值，平滑噪声，突出趋势
• 同比环比：今年某月值 ÷ 去年同月值 − 1，结果转百分比并标红绿（>0 绿，
• 分位数与箱线图：需实现 quickSelect 或调用 typed-array 排序，算 Q1/Q2/Q3/IQR
• 累积求和：用于面积图或堆叠柱状图，逐项累加生成新数据序列

交互响应中的实时重算

悬停、缩放、筛选等操作会触发数值重处理：

• 缩放时间范围时，不是简单裁剪数据，而是重新聚合——如从日粒度聚为周粒度（reduce + groupBy week）
• 图例点击隐藏某系列后，y 轴 domain 必须排除该系列的极值，否则留白过大
• tooltip 显示时，需反向查值：根据鼠标 x 像素 → 通过 scale.invert() 得到原始数据点索引
• 防抖关键：resize 或 mousemove 触发重算前加 16ms throttle，避免频繁执行 reduce/sort