tickformat for d3.js time scale

Question

我正在使用像这样的d3.js time.scale：

var xScale = d3.time.scale()
        .domain(d3.extent(data, function(d) { return d.date; }))
        .range([0, chartWidth]);

数据是这样的：

var testData = [
  {
    "date": "2015-04-01T00:00:00.000Z",
    "value": 200.00
  },
  {
    "date": "2015-05-01T00:00:00.000Z",
    "value": 2000.00
  },
  {
    "date": "2015-06-01T00:00:00.000Z",
    "value": 4000.01
  },
  {
    "date": "2015-07-01T00:00:00.000Z",
    "value": 1000.00
  },
  {
    "date": "2015-08-01T00:00:00.000Z",
    "value": 750.00
  },
  {
    "date": "2015-09-01T00:00:00.000Z",
    "value": 1568.00
  },
  {
    "date": "2015-10-01T00:00:00.000Z",
    "value": 3789.00
  },
  {
    "date": "2015-11-01T00:00:00.000Z",
    "value": 5678.00
  },
  {
    "date": "2015-12-01T00:00:00.000Z",
    "value": 4898.00
  },
  {
    "date": "2016-01-01T00:00:00.000Z",
    "value": 9002.00
  },
  {
    "date": "2016-02-01T00:00:00.000Z",
    "value": 3320.00
  },
  {
    "date": "2016-03-01T00:00:00.000Z",
    "value": 12000.00
  }
];

但是滴答声和顺序并不像我期望的那样：

我希望从2015年4月到2016年3月订购蜱虫，我不明白2016蜱虫的来源。

我如何按照预期订购刻度线，以及2016年刻度线来自何处？

这是一个显示problem

的jsbin

Answer 1

如果您希望刻度显示月份名称和年份，请将其添加到轴：

.tickFormat(d3.time.format("%B %Y"));

或者，您可以显示缩写的月份名称：

.tickFormat(d3.time.format("%b %Y"));

这是更新的jsbin：http://jsbin.com/wikafuluqu/1/edit?js,output

PS：要显示第一个刻度，请将nice()添加到刻度中。这是带有nice()的jsbin： http://jsbin.com/loyupelazu/1/edit?js,output