在D3中添加行中的空格/空格 [英] add space/gap in a line in D3

问题描述

我有一个类似这的多行图表，其中每行代表特定的年份， x轴代表在该特定年份中的（例如，1月1日，1月2日，... 12月31日）。

I have a multiline chart similar to this, where each line represent a particular year and the x-axis represents days(e.g. Jan 1, Jan 2, ... Dec 31) in that particular year.

一些线是闰年，一些是非闰年。对于非闰年行，我希望日期 Feb 29 不显示任何内容，即行中的空格或空格。现在，我的数据集在 Feb 29 对象中有 null 。因此D3认为该点为0并将其一直延伸到底部（x轴）。

some lines are for leap years and some are for non-leap years. For a non-leap year line, I want the date Feb 29 to not display anything, i.e. a gap or a blank space in the line. Right now, my data set has null in the Feb 29 object. So D3 considers that point as 0 and stretches it all the way to bottom(x-axis).

有没有办法在行中实现空格？或者有这个问题的解决方法？任何帮助是赞赏。谢谢。

Is there any way to achieve a space in line? Or is there a workaround for this problem? Any help is appreciated. Thank you.

推荐答案

您可以使用 line.defined ： https://github.com/d3/d3/wiki/SVG-Shapes#line_defined

根据API：

定义的访问器可用于定义

The defined accessor can be used to define where the line is defined and undefined, which is typically useful in conjunction with missing data.

如果您的行应该未定义，其值为null or NaN，do this：

If your line should be undefined where the value is null or NaN, do this:

line.defined(function(d) { return !isNaN(d.x); });

这篇关于在D3中添加行中的空格/空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！