javascript - 当 x 间隔缩短时，是什么导致 d3js 停止画线？

Question

这是一个奇怪的错误；很难解释，所以请耐心等待。我有一些从数据库查询的数据，这些数据通常是 60 秒的部分。但是，如果我插入的一大堆数据不在 60 秒内(比如相隔 0-1 秒)；当查询这个数据时，d3js对于60秒部分的数据画线很好，但是当它遇到间隔不是60秒的新数据时，它就停止画线；见下文:

红点是鼠标悬停表明确实有数据；这种情况发生在“不可见”区域(点所在的位置)。左边有一条清晰可见的线；该数据间隔 60 秒。如果我将数据输入减慢到 60 秒，线条就会恢复(但间隔 0-2 秒的区域不会)。

这是我的一些来源:

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

有人知道为什么要这样做吗？

Answer 1

您正在使用d3.line.define，它基本上可以在您的线路中造成“洞”。 (See doc)

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

请参阅此示例，看起来与您发布的示例完全相同:http://bl.ocks.org/mbostock/3035090

即使鼠标所在的位置有数据，如果它是一个被未定义值包围的孤立点，则不会绘制线条/区域，因为它需要两个连续的数据点来绘制线条/区域。