我使用多行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
这就是我所拥有和想要的。
我想我必须修改这段代码,我不确定:
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]
- 用这两个基准绘制虚线路径,即绘制
[left, right]
,并用以上两个步骤从j
重申数组
对于第二个问题,请注意,您正在路径顶部渲染轴,而不是先渲染轴,然后渲染数据