D3折线图：如何用新数据扩展已有路径

你的核心问题是每次更新时都新增了<path>元素，正确的做法是复用同一个path元素，仅更新它的路径属性（d），具体实现如下：

步骤1：初始化时创建唯一的Path元素 #

在setInterval外部先创建一次折线的path，绑定初始数据并设置样式：

// 初始化阶段创建唯一的path
let linePath = canvas
  .append('path')
    .attr('fill', 'none')
    .attr('stroke', 'steelblue')
    .attr('stroke-width', 1.5)
    .datum(data); // 绑定初始数据数组

步骤2：修改updateLine函数，复用已有Path #

更新函数不再创建新path，而是选中已存在的path，传入最新的完整数据并更新d属性：

function updateLine() {
  linePath
    .datum(data) // 传入新增数据后的完整数组
    .attr('d', d3.line()
      .x(d => xSc(d.x))
      .y(d => ySc(d.z))
    );
}

可选：添加平滑过渡动画 #

如果需要折线延伸时的平滑效果，可加入过渡动画：

function updateLine() {
  linePath
    .datum(data)
    .transition() // 启用过渡
    .duration(300) // 过渡时长（毫秒）
    .attr('d', d3.line()
      .x(d => xSc(d.x))
      .y(d => ySc(d.z))
    );
}

原理说明 #

D3的折线路径由path元素的d属性定义，该属性值是由d3.line()生成器根据完整数据数组计算出的路径字符串。每次新增数据后，只需要用最新的完整数组重新计算d值并赋值给已有path，就能实现折线的延伸，而无需创建新元素。

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