d3.js :时间尺度和数据:滴答和数据之间的某个像素的差距

Question

我有一个关于时间轴的问题，所以我在Web上搜索，在web上的教程/示例中也有同样的问题:(

在这个小提琴http://jsfiddle.net/lampalork/dm6ff3ua/上(这只是在小提琴上找到的一个例子的一个分支)

var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(d3.time.days, 1)
.tickFormat(d3.time.format('%a %d'))
.tickSize(5)
.tickPadding(8);

    svg.selectAll('.chart')
    .data(data)
  .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function(d) { return x(new Date(d.date)); })

你可以看到问题，如果你看时间轴和第一个条形图，你可以看到3-4个像素的差距。我在工作中遇到了同样的问题，我在网络的其他例子中也看到了这个问题。有什么想法吗？谢谢

Answer 1

这一行：

.attr('x', function(d) { return x(new Date(d.date)); })

正在使用UTC时区创建date对象。来自Mozilla

假设时区中的

差异

给定日期字符串“3月7日，2014"，parse()假定为本地时区，但如果给定ISO格式，如"2014-03-07”，它将假定时区为UTC。因此，除非系统将本地时区设置为UTC，否则使用这些字符串生成的Date对象将表示不同的时刻。这意味着，两个看似相等的日期字符串可能会产生两个不同的值，具体取决于要转换的字符串的格式(这一行为在ECMAScript ed6中发生了更改，因此两者都将被视为本地字符串)。

然而，d3正在使用本地时区来绘制记号。

取而代之的是，使用d3.time.format来完成所有的d3操作。在我所在的时区，区别如下：

new Date("2012-03-20")
> Mon Mar 19 2012 20:00:00 GMT-0400 (Eastern Daylight Time)
d3.time.format('%Y-%m-%d').parse("2012-03-20")
> Tue Mar 20 2012 00:00:00 GMT-0400 (Eastern Daylight Time)

已更新fiddle。