D3.line.define 缩放时信息会丢失

Question

我正在使用 D3.line 显示振荡器随时间变化的测量数据。传感器视野有时会被遮挡，导致样本丢失。这些是通过时间戳来识别的。

为了显示样本何时丢失，我使用以下代码行：

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

如果测量及时，则 d.en 为“true”。 x 值保存 d.t（测量时间），y_1 显示测量值 d.a1.

这一切都很好......为了分析数据，我集成了缩放功能。我一使用它，“.define(...”信息就丢失了，d3.line 就不再中断了...

这是执行缩放的代码摘录：

    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));
    };

整个显示屏显示多个图表和值...超过 1000 行。所以我希望提供的信息足以收到提示。

由于我是 d3 和 js 的新手，我不想用 1000 行可能让你抓狂的代码行来攻击你。到目前为止，我设法实现缩放、数据传输等，但在缩放过程中我的图形中断失败。

任何帮助表示赞赏！

检查谷歌（这就是我让大部分代码工作的方式）我发现：

    svg.selectAll('path.line')
    .transition().duration(500)
    .attr('d', function(d) { return valueline(d.values) });

但我不知道如何集成它，它甚至是正确的解决方案。

多多问候 并提前感谢任何线索！ 问候 乔治

Answer 1

我又发现了这个问题...

问题就在这行：

    .defined(d => x(d.en));

这应该读作

    .defined(function(d) { return d.en; })

通过更改此设置，一切都会按预期进行。

我加载到d3图中的数据结构定义为：

            data.push({
          f:  data_queue[i][0],
          a1: data_queue[i][1],
          a2: data_queue[i][2],
          p: data_queue[i][3],
          t: data_queue[i][4],
          en: data_display,
        });

data_display 为布尔值。

希望这对将来的人有帮助！

问候 乔治