Question

注意：我正在使用d3 v5

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

我尝试使用Defined，但是这会导致数据出现间隙，并且我还尝试了将数据简单地传递为d3作为空值，但其处理方式与我传入零相同。这是我的图的一个示例，其中数据以空值而不是使用define传递。

example

这是我的图表示例，其中数据仍然为null并使用define。

example

这是我用来生成行的代码

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

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

19/11/2修改：

我尝试了下面提到的内容，但并未自动将数据集中的所有值包括在内，而是自动包含了所有值。

这是我的数据摘录。

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

如您所见，仅当值是有效数字时才包含值，但是由于这样做了，因此图表生成存在问题。它似乎不喜欢缺少值，因为该行在遇到丢失的值后立即停止生成，对于某些行而言，这是立即发生的，而在随后的某些行中。

这是当前图形：

example

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

Answer 1

这里的问题可以用您的数据结构来解释：您将所有内容都存储在庞大的对象数组中，但并非每个对象都具有workstation，laptop，tablet， macOS，ios和display属性。因此，使用行生成器时，您将以undefined的方式使用（下面有更多内容），这将给NaN和大量错误（请检查控制台）。

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

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

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

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

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

1 个答案: