用虚线显示缺少的值

Show missing values with dotted lines

本文关键字：虚线显示更新时间：2023-09-26

我使用多行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重申数组

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

用虚线显示缺少的值

Show missing values with dotted lines

演示