Javascript 当x间隔缩短时，是什么导致d3js停止绘制直线？

这是一个奇怪的错误；很难解释，所以请容忍我。我从数据库中查询了一些数据，这些数据通常是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); });

---

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

您使用的是

d3.line.defined

，它基本上可以在您的行中留下“洞”。（）

生成的路径数据将自动分解为多个不同的子路径，跳过未定义的数据

请参见此示例，与您发布的示例完全相同：

---

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

您使用的是

d3.line.defined

，它基本上可以在直线上打“洞”。（）

生成的路径数据将自动分解为多个不同的子路径，跳过未定义的数据

请参见此示例，与您发布的示例完全相同：

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