用虚线显示缺失值

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 重复该数组

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

demo