x 轴上日期的奇怪间距 (D3)

Question

我正在尝试使用 [datetime,value] 形式的数据点数组创建一个简单的柱形图，例如 [1422345600000,146]。我想每隔几天用带有标记的刻度的 x 轴上的日期绘制这些。我几乎设法做到了这一点，但前几个滴答声奇怪地间隔在一起。

你可以在这里看到：http://jsfiddle.net/9r4fqbnm/2/

我试过了

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.days,7)
    .tickFormat(d3.time.format("%m/%d/%Y"))

并且前两个刻度之后的刻度确实间隔了 7 天。

我没有在网上找到这个问题——我是不是遗漏了什么明显的东西？

谢谢

Answer 1

你的问题是你的数据数组。我懒得深入研究每个值并查看哪个是罪魁祸首，但基本上是通过将其转换为人类可读的格式并确保值有效 - 解决了问题：

  function getDate(y, m, d) {
    return new Date(y, m, d);
} 
 var data = [
[getDate(2015, 1, 27), 146], [getDate(2015, 1, 28), 132], ...,  [getDate(2015, 2, 24), 67], [getDate(2015, 2, 25), 46]
];

var startDate = data[0][0];
var endDate = data[data.length - 1][0];

...

http://jsfiddle.net/2L3fy90j/1/

x 轴上日期的奇怪间距 (D3)

Strange spacing of dates on x-axis (D3)

d3.js