D3.js折线生成器异常排查：折线无法渲染问题求助

核心错误：折线生成器传参错误 #

D3的line()生成器需要接收完整的数据数组来生成折线路径，你现在是遍历summaryData中的每个单个对象，把单个数据点传给chartLine(d)——单个点无法构成折线，所以生成的path标签没有d属性，自然无法渲染。

修复代码 #

去掉遍历单个数据点的逻辑，直接将整个summaryData数组传给折线生成器，只需一个path元素即可：

<g>
  <path fill="none" stroke="black" strokeWidth={1} d={chartLine(summaryData)}/>
</g>

额外排查点（修复后仍异常时检查） #

• 确认xScale的domain包含所有summaryData中x0的日期范围，示例：

  xScale.domain(d3.extent(summaryData, d => d.x0))
  

• 确认yScale的domain覆盖所有value的取值范围，示例：

  yScale.domain([0, d3.max(summaryData, d => d.value)])
  

• 控制台打印xScale(summaryData[0].x0)和yScale(summaryData[0].value)，验证比例尺输出是否为有效数值。

内容的提问来源于stack exchange，提问作者Malvinka