用虚线显示缺失值

Question

我使用多线 d3 创建了一个非常简单的图表。在我的数据集（csv 文件）中有缺失值，所以我在缺失值 (NaN) 处点缀的是什么线。

我的数据集是：

,time,group,value
1,2000,Apple,0
2,2001,Apple,0
3,2002,Apple,0
4,2003,Apple,0
5,2004,Apple,NA
6,2005,Apple,NA
7,2006,Apple,0
8,2007,Apple,0
9,2000,Banana,1
10,2001,Banana,5
11,2002,Banana,2
12,2003,Banana,3
13,2004,Banana,NA
14,2005,Banana,NA
15,2006,Banana,7
16,2007,Banana,6
17,2000,Clementine,4
18,2001,Clementine,4
19,2002,Clementine,5
20,2003,Clementine,5
21,2004,Clementine,NA
22,2005,Clementine,NA
23,2006,Clementine,2
24,2007,Clementine,1

这是全部代码：https://plnkr.co/edit/jQ5jnzrsmqThufNkDnT8?p=preview

This就是我所拥有的，也是我想要的。

我想我必须修改这段代码位我不确定:

var valueline = d3.svg.line()
    .defined(function(d) { return !isNaN(d.value); }) 
    .x(function(d) { return x(d.time); })
    .y(function(d) { return y(d.value); });

此外，"Apple"组的所有值都为0。为什么没有一行？我应该看到一条与 x 轴重叠的线吗..

Answer 1

您可以通过第二遍生成路径的代码来做到这一点，只是这次数据是按以下方式构建的

找到NA下一次出现的索引i，使left = data[i - 1]
找到第一个不等于NA的值的索引j，使right = data[j]
用这两个数据渲染一条虚线路径，即渲染 [left, right]，并用上述两个步骤 j 重复数组

对于你的第二个问题，请注意你是在路径的顶部渲染轴，而不是先渲染轴再渲染数据

用虚线显示缺失值

Show missing values with dotted lines

javascript

nan

missing-data

d3.js

demo