Q:

What is causing d3js to stop drawing a line when x interval shortens?

This is a weird error; hard to explain so bear with me. I have some data that I query from a database, this data is normally 60 seconds part. However, if I insert a whole bunch of data that's not within 60 seconds (say 0-1 second apart); when this data is queried, d3js draws the lines just fine for the data that is 60 sec part, but when it encounters the new data that is not 60 seconds apart, it stops drawing the line; see below:

The red dot is a mouse over showing that there is indeed data; this occurs all along that "invisible" area (where the dot is). To the left where there is a clearly visible line; this data is separated by 60 seconds. If I slow down the data input back to 60 seconds the lines come back (but not for the area where it's 0-2 seconds apart).
Here is some of my source:
        var xScale = d3.time.scale();     // time series
        var yScale = d3.scale.linear();   // our float/int data points
        var xAxis = d3.svg.axis();
        var yAxis = d3.svg.axis();
        var vline = d3.svg.line();        // our data will use this line
        var varea = d3.svg.area();        // our data will fill this area

        xScale
            .domain(d3.extent(data, function(d) { return parseDate(d.x); }))
            .range([0, width]);

        yScale
            .domain([0, d3.max(data, function(d) {
                if (config.dtype == "%") {
                    return 100;
                } else if (d.y >= 1) {
                    return d.y;
                }

                return 1;
            })])
            .range([height,0]);

        xAxis
            .scale(xScale)
            .orient("bottom")
            .ticks(12)
            .innerTickSize(-height)
            .outerTickSize(-height)
            .tickPadding(3);

        yAxis
            .scale(yScale)
            .orient("left")
            .ticks(5)
            .innerTickSize(-width)
            .outerTickSize(-width)
            .tickPadding(3)
            .tickFormat(d3.format(",.2f"));

        vline
            .defined(function(d) { return d.y != null; })
            .x(function(d) { return xScale(parseDate(d.x)); })
            .y(function(d) { return yScale(d.y); });

        varea
            .defined(function(d) { return d.y != null; })
            .x(function(d) { return xScale(parseDate(d.x)); })
            .y0(height)
            .y1(function(d) { return yScale(d.y); });

Would anyone have any idea why it's doing this?

A:

You are using d3.line.defined which basically can make "hole" in your line. (See doc)

the generated path data will automatically be broken into multiple distinct subpaths, skipping undefined data.

See this example, looking exactly as the one you posted: http://bl.ocks.org/mbostock/3035090
Even if there is data where your mouse is, if it's a lone point surrounded by undefined values, the line / area won't draw, as it needs two consecutive data points to draw  the line / area.

