对于NVD3折线图，删除缺失值(以便能够插值)

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中使用remove？

第二个问题与此直接相关。现在，这条线只连接同一系列的值，当它们之间没有缺失的值时。这意味着这条线有很多缺口。即使中间有缺失的值，也有可能连接一个序列的点吗？

谢谢你的帮助！

Answer 1

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

但是，您通常不希望手动删除所有缺少值的行。您需要使用数组筛选函数来删除数据数组中缺少的值。

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

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