javascript - 数据为空或零时如何继续行？

Question

注意：我使用的是 d3 v5

我正在创建一个图表来表示我的一些团队历史数据。缺少某些时间段的数据，我如何插入甚至只是继续两个非空数据值之间的线？

我尝试过使用已定义，但这会导致数据出现空白，并且我也尝试过将数据作为空值简单地传递到 d3 中，但它的处理方式与我传入零一样。这是我的图表的一个示例，其中数据作为空值传入，而不是使用定义的。

这是我的图表的一个示例，其中数据仍然为空并使用已定义。

这是我用来生成行的代码

types.forEach(function (val) {
    var line = d3.line()
        .x(function (d) {
            return xScale(d.date);
        }) // set the x values for the line generator
        .y(function (d) {
            return yScale(d[val]);
        });
    // 9. Append the path, bind the data, and call the line generator
    svg.append("path")
        .datum(data) // 10. Binds data to the line
        .attr("stroke", colors[val])
        .attr("class", "line") // Assign a class for styling
        .attr("d", line); // 11. Calls the line generator
});

我的最终目标是如果数据存在差距，则在两个最接近的非空值之间直接画一条线。

2/11/19 编辑：

我尝试了下面提到的，我没有自动包含我的数据集中的所有值，只包括那些有值的值。

这是我的数据的摘录。

var data = [{
    date: "9/28/2017",
    value1: 117.043121149897,
    value2: 133.88090349076,
    value3: 131.279945242984
}, {
    date: "9/29/2017",
    value1: 117.316906228611,
    value2: 133.88090349076,
    value3: 131.279945242984
}, {
    date: "11/7/2017",
    value1: 117.864476386037,
    value2: 134.907597535934,
    value3: 130.800821355236,
    value4: 166.666666666667,
    value5: 168.195300022815
}, {
    date: "11/8/2017",
    value1: 117.864476386037,
    value2: 134.907597535934,
    value3: 130.800821355236,
    value4: 195.893223819302,
    value5: 168.195300022815
}, {
    date: "11/9/2017",
    value1: 117.864476386037,
    value2: 134.907597535934,
    value3: 130.869267624914,
    value4: 195.893223819302,
    value5: 168.195300022815
}];

如您所见，我只包含有效数字时的值，但因为我已经这样做了，所以我在图表生成方面遇到了问题。它似乎不喜欢缺少值，因为该行一旦遇到缺失值就会停止生成，对于某些行来说，这是立即发生的，而其他行则在稍后发生。

这是当前的图表：

这是我当前代码的一个块：https://blockbuilder.org/ctooley21/c4c455c20eea8d7018e92bd3c348d35e javascript 数组是使用 c# asp.net 动态生成的

标签： javascriptd3.js

Answer 1

这里的问题可以通过数据的结构来解释：您拥有大量对象中的所有内容，但并非每个对象都具有、workstation、laptop、tablet和macOS属性。正因为如此，当你以你正在使用的方式使用 line generator 时（更多内容见下文），这将产生s 和大量错误（检查你的控制台）。iosdisplayundefinedNaN

无需过多重构代码的最简单解决方案是过滤循环内每个属性的数据：

var thisData = data.filter(function(d){
    return d[val];
});

这是更新的块构建器：https ://blockbuilder.org/GerardoFurtado/bdd84ce289f7868183681e4d631e1488

PS：根据经验，不要使用循环在 D3 代码中附加元素。