解决D3.js平行图path属性'Expected number'错误（CSV输入）

云上老周

2026-7-20

解决D3.js平行图y坐标NaN问题

问题根源

CSV导入的指标数据默认是字符串类型，直接用d3.extent()计算范围时，会按字符串规则排序得到错误极值（比如"100"会被判定为小于"99"），后续比例尺映射时，字符串无法被正确转换为数值，最终导致y[column](d[column])返回NaN。

解决方案

预处理CSV数据，强制转换指标为数值类型
在d3.csv()的回调逻辑中，遍历每条数据的指标列，将字符串转为数字：

d3.csv("your-city-data.csv").then(function(data) {
  // 筛选出除城市名称外的所有指标列
  const metricColumns = data.columns.filter(col => col !== "city");
  data.forEach(d => {
    metricColumns.forEach(col => {
      d[col] = +d[col]; // 强制转换为数值类型
    });
  });
  // 后续平行图绘制逻辑...
});

基于数值数据生成正确的比例尺定义域
数据转换完成后，再用d3.extent()计算各维度的合理范围：

const y = {};
metricColumns.forEach(col => {
  y[col] = d3.scaleLinear()
    .domain(d3.extent(data, d => d[col])) // 此时d[col]为数值，extent可得到正确极值
    .range([height, 0]); // SVG y轴向下为正，因此range设置为[画布高度, 0]
});

处理边缘异常值
如果CSV中存在空值或非数字字符，转换时会生成NaN，可根据业务需求做过滤：
```
d[col] = isNaN(+d[col]) ? 0 : +d[col]; // 空值替换为0，或自定义其他默认值
```
同时检查d3.extent的返回值，若所有数据为空，需手动设置默认定义域，比如.domain([0, 100])。