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

Question

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

红点是鼠标悬停，表示确实有数据；这一直发生在 "invisible" 区域（点所在的位置）。左边有一条清晰可见的线；此数据相隔 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.defined，基本上可以在您的行中生成 "hole"。 (See doc)

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

查看此示例，与您发布的示例完全相同：http://bl.ocks.org/mbostock/3035090

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

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

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

javascript

linechart

d3.js