Question

我想绘制一些不连续的时间序列数据（周末，假日等日期的差距）。这是每日数据。

数据类似于：

date,value
1/2/15,109.33
1/5/15,106.25
1/6/15,106.26
1/7/15,107.75
1/8/15,111.89
1/9/15,112.01
1/12/15,109.25
1/13/15,110.22
...

所以我定义了我的x和y scales：

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

并从我的源数据中设置域：

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.value; }));

但问题是，我的日期中存在差距。我的x轴现在包括那些缺少的日期（d3.time.scale()我自动这样做，因为它映射到连续范围？）。

.extent()在date中找到最大值和最小值，然后.domain()将这些最大值和最小值作为x轴的范围返回。但我不确定如何处理差距并将非间隙日期返回到范围内。

所以我的问题是：如何让我的x轴范围仅包括我的数据集中的日期？而不是“填补空白”。我应该玩d3.time.scale().range()吗？或者我是否需要使用其他scale？

这样做的正确方法是什么？有人可以指出我正确的方向或举一些例子吗？谢谢！

另外请，我想用简单的d3和javascript来解决。我对使用任何第三方抽象库都不感兴趣。

Answer 1

正如Lars Kotthof指出的那样，你可以创建一个有序的x轴，它看起来像一个时间尺度。假设您想将时间序列绘制为一条线，下面是一个示例：http://jsfiddle.net/ee2todev/3Lu46oqg/

如果您想自定义日期格式，例如将日期作为日期（星期），日期和月份重新表示您必须先将字符串转换为日期。我添加了一个以普通德语格式格式化日期的示例。但您可以根据需要轻松调整代码。 http://jsfiddle.net/ee2todev/phLbk0hf/

最后但并非最不重要的是，您可以使用

axis.tickValues([values])

Answer 2

d3fc-discontinuous-scale组件适应任何其他比例（例如d3时标）并添加不连续的概念。

这些不连续性是通过“不连续性提供者”确定的，内置discontinuitySkipWeekends允许您跳过周末。

以下是一个例子：

const skipWeekendScale = fc.scaleDiscontinuous(d3.scaleTime())
  .discontinuityProvider(fc.discontinuitySkipWeekends());