使用D3v7绘制多线图仅显示1条线的问题排查

核心问题原因 #

你的代码中使用svg.selectAll("path")绑定数据时，会选中SVG内所有已存在的<path>元素（比如X轴的轴线就是一个<path>），导致数据绑定逻辑错误，无法正确生成3条折线。

另外，颜色比例尺的调用可以更规范，减少对索引的依赖。

修复步骤 #

1. 为折线元素添加专属类名
   使用.line类来定位折线的<path>，避免与坐标轴等其他SVG元素冲突，确保数据绑定只作用于我们需要创建的折线。

2. 规范颜色比例尺的使用
   用每个折线对应的method字段（比如"Online"、"Instore"）来获取颜色，而不是依赖索引值，这更符合D3比例尺的设计逻辑，也便于后续维护。

修改后的折线生成代码 #

// 替换原有添加线条的代码块
const lineGraph = svg.selectAll(".line")
      .data(salesMethods)
      .enter()
      .append("path")
      .attr('class', 'line') // 添加专属类名
      .attr('stroke', function(d) { return colourScale(d.method) }) // 用method匹配颜色
      .attr('stroke-width', 1.25)
      .style("fill", "none")
      .attr("d", function(d) { return line(d.values); });

额外验证点 #

• 打开浏览器开发者工具的控制台，检查是否有NaN相关报错：如果数据中存在空值，parseFloat(d[method])会生成NaN，导致D3无法渲染对应线条。
• 确认salesMethods中每个values数组的total字段都是有效数值，无空值或非数字内容。

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