D3.line.defined配置在缩放时失效问题求助

场景与初始实现 #

用D3.line展示振荡器时序测量数据，传感器被遮挡时采样缺失，通过d.en标记有效采样，初始代码可正确在缺失位置中断线条：

var amp1 = d3.line(context)
    .x(function(d) { return x(d.t); } )
    .y(function(d) { return y_1(d.a1); } )
    .defined(d => d.en);

缩放引入后的问题 #

启用缩放功能后，.defined的中断逻辑失效，缺失采样部分不再断开，缩放代码片段：

var zoom = d3.zoom()
    .scaleExtent([1, Infinity])
    .translateExtent([ [0, 0], [diagram_width, diagram_0_height] ])
    .extent([ [0, 0], [diagram_width, diagram_0_height] ])
    .on("zoom", zoomed);

function zoomed() {
    if (datacount == -1) return;
    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush_context") return; 

    var t = d3.event.transform;
    var s = d3.event.selection || x_context.range()

    brush_select_xmin=x.invert(s[0]);
    brush_select_xmax=x.invert(s[1]);

    x.domain(t.rescaleX(x_context).domain());
    diagram_0.select(".line_00").attr("d", freq);
    diagram_0.select(".axis--x_0").call(xAxis);
    diagram_1.select(".line_10").attr("d", amp1);
    diagram_1.select(".line_11").attr("d", amp2);
    diagram_pos.select(".line_pos").attr("d", position_line);
    diagram_pos.select(".axis--x_0").call(xAxis);
    diagram_1.select(".axis--x_1").call(xAxis);

    context.select(".brush_context").call(brush.move, x.range().map(t.invertX, t));
};

解决方案提示 #

你查到的代码核心是缩放时重新用生成器结合数据计算路径，针对你的问题，可按以下步骤调整：

• 核心问题：当前在zoomed函数中直接传递amp1给attr("d")，D3会默认使用绑定到路径元素的数据，但如果数据绑定丢失或不正确，就会忽略.defined逻辑。
• 调整路径更新逻辑：明确传入原始数据数组给生成器，替换zoomed函数中的路径更新代码：

  // 替换原有的 diagram_1.select(".line_10").attr("d", amp1);
  diagram_1.select(".line_10")
    .transition().duration(300) // 可选过渡效果，提升交互体验
    .attr("d", amp1(yourAmp1Data)); // yourAmp1Data是绘制该线条的原始数据集合
  
  // 同理处理amp2和其他线条
  diagram_1.select(".line_11")
    .transition().duration(300)
    .attr("d", amp2(yourAmp2Data));
  

• 关键确认：确保yourAmp1Data等数据集合中每个元素都保留d.en字段，没有被过滤或修改。.defined配置本身不会丢失，只要生成器能拿到完整的有效标记字段，就能正确中断线条。
• 额外检查：确认没有其他代码在缩放过程中重新定义amp1、amp2等生成器，覆盖了.defined配置。

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