d3.js: временная шкала и данные: вид какого-то пикселя между тиком и данными

Question

У меня возникла проблема с осью времени, поэтому я ищу в Интернете, и я вижу, что в учебнике/примерах есть та же проблема. веб :(

на этой скрипке http://jsfiddle.net/lampalork/dm6ff3ua/ (это просто вилка из Exemple найти на скрипке)

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

вы можете увидеть проблему, если вы посмотрите на оси времени и первой гистограмме вы можете увидеть я получаю такую ​​же проблему на своей работе, и я вижу эту проблему на другом примере сети. Любая идея? Спасибо

Answer 1

Эта линия:

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

создает объект даты с UTC часовой пояс. От Mozilla:

Различия в предполагаемой временной зоне

Учитывая дату строку «7 марта 2014 года», синтаксический анализ() предполагает местное время зоны, но данный формат ISO, такие как «2014- 03-07 "он будет принимать часовой пояс UTC. Поэтому объекты Date, созданные с использованием этих строк , будут представлять разные моменты времени, если система не установлена ​​с местным часовым поясом UTC. Это означает, что две строки даты, которые отображаются эквивалентом , могут приводить к двум различным значениям в зависимости от формата строки, которая преобразуется (это изменение изменяется в ECMAScript ed 6, так что оба будут рассматриваться как локальные).

d3, хотя использует местный часовой пояс, чтобы нарисовать тики.

Вместо этого сделайте все, чтобы использовать d3 и используйте d3.time.format. В моем часовом поясе, здесь разница:

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.