tickformat for d3.js time scale

问题

I am using a d3.js time.scale like this:

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

The data is like this:

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

But the ticks and the ordering are not as I would expect:

I would expect the ticks to be ordered from april 2015 to march 2016 and I do not understand where the 2016 tick is coming from.

How can I order the ticks as I would expect and also where is the 2016 tick coming from?

Here is a jsbin that shows the problem

回答1:

If you want the ticks to show the month name and the year, add this to the axis:

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

Alternatively, you can display the abbreviated month name:

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

Here is the updated jsbin: http://jsbin.com/wikafuluqu/1/edit?js,output

PS: To show the first tick, add nice() to the scale. This is the jsbin with nice(): http://jsbin.com/loyupelazu/1/edit?js,output

来源：https://stackoverflow.com/questions/38549716/tickformat-for-d3-js-time-scale

标签

d3.js