nvd3.js - 对于 NVD3 lineChart 删除缺失值(以便能够插值)

Question

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

这是两个叠在一起的折线图。我遇到的问题是有很多缺失值，这会导致两个问题:

如果我不能确保缺失值未可视化，则折线图会将所有显示的值与缺失值连接起来。因此，我使用以下方法不将缺失值包含在折线图中:

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)

});

此处更新了 fiddle :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.
    }
});