如何在 d3 中为日期时间刻度设置正确的域答案

【问题标题】：how to set proper domain for date time scale in d3如何在 d3 中为日期时间刻度设置正确的域
【发布时间】：2014-08-13 10:53:10
【问题描述】：

我正在尝试使用以下数据构建散点图：

[
{"frequency": 10, "date": "2014-01-01"},
{"frequency": 20, "date": "2014-01-02"},
{"frequency": 30, "date": "2014-01-03"}
]

我在 x 轴上绘制“日期”，在 y 轴上绘制频率。我在 x 轴上使用“d3.time.scale”。问题是比例和刻度从原点开始在 x 轴上，因此我得到从我的 y 轴开始的图。

为了解决这个问题，我尝试将前一天和后一天，即“2013-12-31”和“2014-01-04”添加到 x 轴域（使用“d3.time.day.偏移”函数）。

如果给定的时间序列以天为间隔，则上述代码有效。如果我的数据是这样的几个月间隔：

 [
{"frequency": 10, "date": "2014-01-01"},
{"frequency": 20, "date": "2014-02-02"},
{"frequency": 30, "date": "2014-03-03"}
]

上面的代码不起作用。我必须改用“d3.time.month.offset”函数。

有没有办法知道给定时间序列的间隔并使用适当的偏移量。（即“d3.time.month.offset”、“d3.time.year.offset”、“d3.time.day.offset”等）。

谢谢

【问题讨论】：

您可以在设置域后尝试在秤上调用.nice()，看看是否适合您。
@LarsKotthoff 试过了。它不起作用。

标签： javascript datetime d3.js

【解决方案1】：

我遇到了类似的问题，但我认为这可能有用：http://jsfiddle.net/robdodson/KWRxW/

var x = d3.time.scale() .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)]) .rangeRound([0, width - margin.left - margin.right]);

此外，Mike 在此处列举了日期/时间偏移：https://github.com/mbostock/d3/wiki/Time-Intervals

【讨论】：

【解决方案2】：

这是一个跨浏览器的解决方案：

var timeFormat = d3.time.format('%Y-%m-%dT%H:%M:%S');

当用于设置刻度的域时，将返回一个跨浏览器一致的日期对象：

.domain([timeFormat.parse('2014-03-08T12:00:00'), timeFormat.parse('2014-03-10T00:00:00')])

更多信息请参见http://bl.ocks.org/jebeck/9671241

【讨论】：