javascript - 用虚线显示缺失值

我使用多线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轴重叠的线。

最佳答案

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


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


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

demo

关于javascript - 用虚线显示缺失值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37240337/