在d3 js中为x时间轴设置范围和域

Question

我对d3 js相当陌生，但是在设置轴方面仍然存在问题。我正在尝试为horizontal floating bar chart设置时间轴。我的代码看起来相对相同，除了一个小小的例外，即往返于201808、201809等（年和月）。

jsfiddle来自下面链接的示例中的已编辑代码。更改在数据集和以下位置：

var xAxis = d3.axisBottom(x)
      .tickFormat(d3.time.format("%Y%b"));

显然，这不是将时间分配给轴的最明智的方法，但是我仍然对轴的域，范围和比例有疑问。

Answer 1

您的主要问题是您不能混合使用d3v3和d3v4 API调用

不是

var xAxis = d3.axisBottom(x)
      .tickFormat(d3.time.format("%Y%b"));

但是

var xAxis = d3.svg.axis().scale(x).orient("bottom");
    // .tickFormat(d3.time.format("%Y%b"))

向您的控制台进行提示，并查看为什么看不到东西的问题的可能原因

要获取时间轴，您需要使用时间刻度，并且需要解析时间，但是它们是数字，因此您可以使用

function NumberToDate(n) {
   return new Date(n/100, (n%100)-1, 1);
}

Julyy具有y（一）y。

如何从未来回到过去

{"month": "May", "to": 201803, "from": 201812}