d3.js时间刻度的刻度格式 [英] tickformat for d3.js time scale

问题描述

我正在像这样使用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]);

数据如下:

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:

我希望从2015年4月到2016年3月订购价格变动表，我不知道2016年价格变动表的来源.

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.

如何按我的期望对报价进行排序，以及2016年报价来自何处?

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

推荐答案

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

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"));

这是更新的jsbin: http://jsbin.com/wikafuluqu/1/编辑?js，输出

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

PS:要显示第一个刻度，请在刻度上添加nice().这是带有nice()的jsbin: http://jsbin.com/loyupelazu/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

这篇关于d3.js时间刻度的刻度格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！