D3 非连续日期域在 X 轴上产生间隙 [英] D3 Non-Continuous Dates Domain Gives Gaps on X-Axis

问题描述

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

I want to plot some time series data that is not continuous (gaps in the dates for weekends, holidays, etc..). It's daily data.

数据看起来像:

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:

So I define my x and y scales:

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

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

And set the domain from my source data:

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

然而，问题是我的日期之间存在差距.我的 x 轴现在包括那些缺失的日期(d3.time.scale() 我猜这是自动执行的，因为它映射到连续范围?).

The problem however, is that my dates have gaps in them. And my x-axis now includes those missing dates (d3.time.scale() does this automatically I guess because it maps to a continuous range?).

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

.extent() finds the max and min values in date then .domain() returns those max and min values as the range for the x-axis. But im not sure how to handle gaps and return the non gap dates to the range.

所以我的问题是:如何让我的 x 轴范围只包含数据集中的日期?而不是填空".我应该玩 d3.time.scale().range() 吗?还是我需要使用不同的scale?

So my question is: How can I have my x-axis range only include the dates that are in my data set? And not "fill in the blanks". Should I play with the d3.time.scale().range() ? or do I need to use a different scale?

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

What is the correct way to do this? Can someone please point me in the right direction or give some example? Thank you!

另外，我想用简单的 d3 和 javascript 来解决.我对使用任何 3rd 方抽象库不感兴趣.

Also please, I want to solve with with just plain d3 and javascript. I am not interested in using any 3rd party abstraction libraries.

推荐答案

正如 Lars Kotthof 所指出的，您可以创建一个序数 x 轴，它看起来"像一个时间刻度.假设您想将时间序列绘制为一条线，这里有一个示例:http://jsfiddle.net/ee2todev/3Lu46oqg/

As Lars Kotthof points out, you can create an ordinal x axis, which "looks" like a time scale. Assuming you want to plot your time series as a line, here is an example how to do it: http://jsfiddle.net/ee2todev/3Lu46oqg/

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

If you want to customize your format for the dates, e.g. respresent the date as day (of the week), day and month you have to convert your string to a date first. I added one example which formats the dates in a common German format. But you can easily adjust the code to your needs. http://jsfiddle.net/ee2todev/phLbk0hf/

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

Last, but not least, you can use

axis.tickValues([values])

选择要显示的日期.也可以看看:https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat

to choose the dates you want to display. See also: https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat

这篇关于D3 非连续日期域在 X 轴上产生间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！