d3.timeParse ("% Y"): даты 1895 года раньше не отмечены правильно

Question

У меня проблема в том, что годы неправильно помечены в моей гистограмме с отрицательными значениями:

Если я использую даты выше 1894 года, все работает нормально, но если я использую даты, это похоже на

«дата»: «1846»

этикетки только что заменены на ": 00" .

Я использую d3.v4.min.js. Данные поступают из простого JSON. Этот пример используется в качестве основы: https://bl.ocks.org/WillTurman/9c4142944f6132855fd318350f552b7b

Как я могу это изменить

    var parseDate = d3.timeParse("%Y");

так это также обозначает годы ниже 1895?

Answer 1

Код работает в Firefox, но не в Chrome (v68). Я не проверял другие браузеры, во всяком случае, есть проблема.

Проблема в оси, в противном случае даты обрабатываются надлежащим образом: график отображается так, как и должно быть. В частности, проблема заключается в функции формата тиков оси по умолчанию - после того, как все оси тоже созданы правильно - только метки тиков имеют неправильный формат.

По какой-либо причине (я еще не копался в этом) поведение формата тиков по умолчанию в Firefox и Chrome отличается от даты и оси, которые вы используете. Это можно решить, указав свой собственный формат тиков:

var timeFormat = d3.timeFormat("%Y"); 

var xAxis = d3.axisBottom(x)
   .tickFormat(timeFormat)

Это должно дать вам что-то вроде:

var width = 600, height = 200;
var start = "January 1, 1600";
var end = "January 1, 2000";

var parse = d3.timeParse("%B %d, %Y");
var format = d3.timeFormat("%Y");

var scale = d3.scaleTime()
  .domain([parse(start),parse(end)])
  .range([10,width-10]);
  
var axis = d3.axisBottom(scale)
  .tickFormat(format);

d3.select("body")
  .append("svg")
   .attr("width",width)
   .attr("height",height)
   .append("g")
   .attr("transform","translate(0,100)")
   .call(axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

А вот пример на вашем примере.

Если вы хотите отформатировать дату по-другому (в этом примере я использую только год), взгляните на спецификаторы форматирования времени d3 здесь .