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

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])