Question

我正在使用NVD3来显示经济不平等的数据。美国的图表在这里：http://www.chartbookofeconomicinequality.com/inequality-by-country/USA/

这两个lineCharts相互叠加。我遇到的问题是有很多缺失值，这会导致两个问题：

如果我不确定缺失值是否未可视化，则折线图会将所有显示的值与缺失值连接起来。因此，我使用以下内容没有折线图中包含的缺失值：

chart = nv.models.lineChart()
            .x(function(d) { return d[0] })
            .y(function(d) { return d[1]== 0 ? null : d[1]; })

但是如果你将鼠标悬停在x轴上，你会看到鼠标悬停时工具提示中显示的缺失值。我可以完全摆脱它们吗？可能在NVD3中使用删除？

第二个问题与此直接相关。现在，当两行之间没有缺失值时，该行仅连接同一系列的值。这意味着线条中存在许多空白。是否可以连接一个系列的点，即使它们之间缺少值？

感谢您的帮助！

Answer 1

正如Lars所示，让图表看起来像你想要的只是从数据数组中删除缺失的值。

但是，您通常不希望手动执行此操作，删除所有缺少值的行。您需要使用array filter函数从数据数组中删除缺失的值。

一旦你将完整的数据数组作为一个系列对象数组，每个都有一个值数组，这段代码应该可以工作：

//to remove the missing values, so that the graph
//will just connect the valid points,
//filter each data array:
data.forEach(function(series) {
    series.values = series.values.filter(
        function(d){return d.y||(d.y === 0);}
    );
    //the filter function returns true if the
    //data has a valid y value 
    //(either a "true" value or the number zero,
    // but not null or NaN)

});

此处更新了小提琴：http://jsfiddle.net/xammamax/8Kk8v/

当然，当您从csv构建数据数组时，每个系列都是一个单独的列，您可以在创建数组的同时进行过滤：

var chartdata = [];//initialize as empty array

d3.csv("top_1_L-shaped.csv", function(error, csv) {

    if (error)
        return console.log("there was an error loading the csv: " + error);

    var columndata = ["Germany", "Switzerland", "Portugal", 
                      "Japan", "Italy", "Spain", "France", 
                      "Finland", "Sweden", "Denmark", "Netherlands"];

    for (var i = 0; i < columndata.length; i++) {

        chartdata[i].key = columndata[i];

        chartdata[i].values = csv.map(function(d) {
                return [+d["year"], +d[ columndata[i] ] ];
            })
            .filter(function(d){
                return d[1]||(d[1] === 0);
            });
            //the filter is applied to the mapped array, 
            //and the results are assigned to the values array.
    }
});

对于NVD3 lineChart删除缺失值（能够插值）

1 个答案: