D3.js折线图显示异常求助：折线形状怪异如何修复？

安全阿岳

2026-7-27

修复D3.js折线图异常问题

核心问题：数据未按时间排序

D3的折线生成器会严格按照传入数据的顺序绘制路径，如果你的CSV文件中Date列的年份不是有序排列，折线就会出现来回跳跃的怪异形状。

修复步骤：

在格式化数据后，添加数据排序逻辑：

// Format the data
data.forEach(d => {
  d.Date = parseDate(d.Date);
  d['High income'] = +d['High income'];
});

// 新增：按Date升序排序数据
data.sort((a, b) => a.Date - b.Date);

其他可选优化点

补充折线样式：如果未通过CSS定义.line样式，折线可能显示异常，可直接在代码中设置：

svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", valueline)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 2);