D3.js折线图无显示求助：按日期汇总病例数据异常

你的代码存在数据结构不匹配、比例尺配置错误、折线生成逻辑偏差等问题，导致折线无法渲染，以下是具体修复方案：

1. 修正CSV数据格式 #

你的CSV文件中德国条目末尾多了一个冗余逗号：

GR,Germany,2020-03-26,0.195,

删除该逗号，避免D3解析时生成无效空字段。

2. 移除无效字段赋值 #

CSV中不存在vaccinations字段，代码中强行赋值会生成NaN，直接删除该行：

// 移除此行，CSV无对应字段
// d.vaccinations= +d.vaccinations;

3. 转换rollups结果为标准对象数组 #

d3.rollups返回的是二维数组结构[[日期, 汇总值], ...]，需要转换为包含date和cases属性的对象数组，才能被折线生成器正确识别：

const totalCases = d3.rollups(dataline, d => d3.sum(d, e => e.cases), d => d.date)
  .map(([date, cases]) => ({ date, cases }));

4. 修正比例尺定义域与范围 #

• X轴：使用汇总后的totalCases数据确定时间范围，同时确保宽度变量与SVG容器匹配
• Y轴：基于汇总后的每日总病例数设置最大值，而非原始单条记录的最大值，避免折线超出可视范围：

const chartWidth = widthline - marginline.left - marginline.right;
const chartHeight = heightline - marginline.top - marginline.bottom;

let x = d3.scaleTime()
  .domain(d3.extent(totalCases, d => d.date))
  .range([0, chartWidth]);

let y = d3.scaleLinear()
  .range([chartHeight, 0])
  .domain([0, d3.max(totalCases, d => d.cases)]);

5. 修复折线生成器与数据绑定逻辑 #

原代码错误地将单个汇总值传给折线生成器，正确做法是将整个对象数组传入，同时简化折线生成器的回调：

let firstline = d3.line()
  .x(d => x(d.date))
  .y(d => y(d.cases));

// 单条折线无需使用selectAll+enter，直接添加path即可
line1.append('path')
  .attr('fill', 'none')
  .attr('stroke-width', 2) // 调宽线条，便于观察
  .attr('class', 'line')
  .attr('d', firstline(totalCases))
  .style('stroke', 'steelblue');

6. 修正坐标轴位置 #

将X轴的固定高度值改为动态计算的图表高度，确保与SVG容器尺寸匹配：

let axisX = line1.append('g')
  .attr('class', 'axis')
  .attr('transform', `translate(0, ${chartHeight})`)
  .call(d3.axisBottom(x))
// ... 后续文本代码不变

内容的提问来源于stack exchange，提问作者Mr.Muu