D3.line.defined Information gets lost when zooming

Question

I am using D3.line to display measurement data of an oscillator over time. The sensors view is blocked from time to time, to samples are missing. These are identified via timestamp.

To show when samples are missing I use the following code lines:

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

where d.en holds "true" if the measurement was in time. The x value holds d.t (the time of the measurement) and y_1 shows the measurement value d.a1.

This all works fine... To analyze the data I have integrated a zoom-function. As soon as I use it, the ".define(..." information is lost and the d3.line is nut interrupted any more...

Here is an excert of the code doing zooming:

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

The whole display shows several diagrams and values... Over 1000 lines. So I hope the information provided are enough to receive hints.

As I am a newbie to d3 an js, I dont want to slam you with 1000ds of code lines that may curl your neck-hair. So far I manage to get my zooming, my data transmission etc, but my graph-interruption fails durning zooming.

Any help appreciated!

Checking Google (an this is how I got most of the code working) I found:

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

But I have no clue how to integrate this it it is even the right solution.

Many greetings and thanks in advance to any clues! Greetings Georg

Answer 1

I picked up the problem one again...

The problem is in the line:

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

This should read

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

By changing this, everything works as expected.

The data structure I load into the d3 graph is defined as:

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

With data_display beeing a boolean.

Hope this helps someone in the future!

Greetings Georg