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

以下是所有代码：

是我拥有的和我想要的

我想我必须修改这段代码，我不确定：

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轴重叠的线，您可以通过生成路径的第二次代码来实现这一点，只有这一次数据是按照以下方式构建的

• 找到下一次出现的

  NA

  的索引

  i

  ，使

  left=data[i-1]

• 找到第一次出现的不等于NA的值的索引

  j

  ，使

  right=data[j]

• 使用这两个基准渲染虚线路径，即渲染

  [左，右]

  ，并使用上述两个步骤重复

  j

  中的数组

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

---

为了使其在plnkr上工作，您需要使用https而不是http加载d3脚本。谢谢，现在示例代码可以工作了！非常感谢。为什么互动不起作用？为什么我点击图例时虚线部分没有消失？设置了

id

，这很奇怪。因为现在有两个路径具有相同的id，我将其更改为使用类，请查看更新的plunkr演示：）