D3.js绘制折线报错：Uncaught TypeError: m.selectAll is not a function

这个错误的核心原因是你在D3折线生成器中错误地使用了坐标轴对象来计算数据点坐标，而非对应的比例尺。

错误分析 #

你定义了x和y作为坐标轴渲染对象（d3.axisBottom()/d3.axisLeft()），但在d3.line()的访问器里直接调用了这两个对象：

const line = d3.line()
    .x(d => x(d.interval)) // 这里的x是坐标轴对象，不是比例尺
    .y(d => y(d.value));    // 同理y也是坐标轴对象

D3的坐标轴对象负责绘制刻度和轴线，不具备直接计算数据到像素坐标的能力，调用它会内部触发错误，导致selectAll is not a function。

修复方案 #

修改折线生成器，使用你定义的比例尺对象（xAxisScale和yAxisScale）来计算坐标，同时要加上左侧边距marginLeft来对齐坐标轴：

const line = d3.line()
    .x(d => marginLeft + xAxisScale(d.interval)) // 用比例尺计算x坐标并偏移边距
    .y(d => yAxisScale(d.value));                // 用比例尺计算y坐标

完整修复后的核心代码片段 #

// ... 其他代码保持不变

const line = d3.line()
    .x(d => marginLeft + xAxisScale(d.interval))
    .y(d => yAxisScale(d.value));

svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("d", line);

额外优化建议 #

• 统一变量声明：height的判断里混用了var，建议全部改为const，保持代码一致性。
• 调整x轴比例尺的range起始值：当前xAxisScale.range([1, ...])可以改为[0, ...]，配合marginLeft偏移更合理，避免折线左侧出现不必要的空白。

内容的提问来源于stack exchange，提问作者Geovane Krüger