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
:
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()
返回这些max和min值作为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()
吗?或者我需要使用不同的缩放
?
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解决。我不想使用任何第三方抽象库。
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屋!