D3 非连续日期域在 X 轴上产生间隙答案

【问题标题】：D3 Non-Continuous Dates Domain Gives Gaps on X-AxisD3 非连续日期域在 X 轴上产生间隙
【发布时间】：2015-01-24 19:32:18
【问题描述】：

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

数据看起来像：

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 来解决。我对使用任何 3rd 方抽象库不感兴趣。

【问题讨论】：

【解决方案1】：

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

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

最后但同样重要的是，您可以使用

axis.tickValues([values])

【讨论】：

【解决方案2】：

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

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

这是一个例子：

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

【讨论】：