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>

这是一个使用您的示例的example。

如果您要更改日期格式（在本示例中仅使用年份），请查看d3的时间格式说明符here。