javascript - d3.js : time scale and data : gape of some pixel between tick and data -

i got problem time axis search on web , see there same problem on tutorial/exemple on web :(

on fiddle http://jsfiddle.net/lampalork/dm6ff3ua/ (it's fork of exemple find on fiddle)

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)); }) 

you can see problem, if time axis , first bar chart can see gape of 3-4 pixel. got same problem on work , see problem on other exemple of web. idea ? thanks

this line:

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

is creating date object utc timezone. mozilla:

differences in assumed time zone

given date string of "march 7, 2014", parse() assumes local time zone, given iso format such "2014-03-07" assume time zone of utc. therefore date objects produced using strings represent different moments in time unless system set local time zone of utc. means 2 date strings appear equivalent may result in 2 different values depending on format of string being converted (this behavior changed in ecmascript ed 6 both treated local).

d3 though using local timezone draw ticks.

instead d3 way , use d3.time.format. in timezone, here's difference:

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) 

updated fiddle.