D3使用d3.line()生成折线时每数据点对应生成一条曲线问题排查

问题根因 #

你的数据绑定逻辑存在错误：折线图仅需1个<path>元素即可绘制完整曲线，但你为selectAll("path.line")绑定了完整的点数组data，数组包含多少个元素，D3就会生成多少个对应的<path>元素，因此3个数据点生成3条重复曲线、200个数据点生成200条重复曲线。

修正代码 #

let line = d3.line()
                .x(d => xScale(d["x"]))
                .y(d => yScale(d["y"]))
                .curve(d3.curveCardinal); 

function updateLine(data){
    // 将整个点数组作为单个数据项绑定，仅需生成1个path元素
    let g1 = svg.selectAll("path.line").data([data]);
    g1
    .enter().append('path')
    .attr("class", "line")
    .merge(g1)
    .attr("d", line(data))
    .attr("fill", "none")
    .attr("stroke", "#348")
    .attr("stroke-width", "1px");
    // 补充删除冗余元素逻辑，避免动态更新数据时残留旧DOM
    g1.exit().remove();
}

核心改动说明 #

• 把data(data)调整为data([data])：将整个点数组作为单个数据项传入，D3就只会匹配生成1个<path>元素，和内部包含的点数量无关
• 新增g1.exit().remove()：处理数据动态更新的场景，自动删除多余的旧折线元素

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