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

你可以通过第二次生成路径的代码来实现，只有这次数据是按照以下方式构建的

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

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

用虚线显示缺失值

1 个答案:

here