Date D3.js-如何将刻度值格式化为季度而不是月份

我有一组季度数据。以下是阵列：

var dataGDP = [
{date:  "Q1-2008",  GDPreal:    "2.8"},
{date:  "Q2-2008",  GDPreal:    "0.6"},
{date:  "Q3-2008",  GDPreal:    "-2.1"},
{date:  "Q4-2008",  GDPreal:    "-4.3"},
{date:  "Q1-2009",  GDPreal:    "-6.8"},
{date:  "Q2-2009",  GDPreal:    "-6.3"},
{date:  "Q3-2009",  GDPreal:    "-5"}
];

我如何让这些日期显示在我的X轴上，比如2008年第1季度、2008年第2季度、2008年第3季度等等？我的X轴使用基于时间的刻度，我不确定是否有办法解析这些日期，因为它们现在使用的是d3.time.format。但是，如果我使用月份，比如01/2008、04/2008，我可以解析它们。。。使用：parseDate=d3.time.format（“%m/%Y”）.parse

---

我是否应该在数组中以月为单位写入日期，然后编写函数将月转换为季度？或者有没有办法让Q1..ect保持现在的数组状态并解析日期？

D3不支持季度（既不解析也不格式化它们）。除非您明确需要与时间相关的功能，否则您可以简单地保留这些值，并使用。

这里有一个很好的自述文件，介绍如何手动解析四分之一，但d3不会自动执行该过程

---

以下是我如何为我的数据解决这个问题的

请注意，我从日期（x.getTime（）-10000）开始计算了10秒，以说明将2015年3月31日视为2015年4月1日午夜的数据，这将导致计算中断。根据您的数据，您可能需要也可能不需要这样做

    var xAxis = d3.svg.axis()
            .scale( x )
            .ticks( d3.time.months, 3 )
            .tickFormat( function ( x ) {
                             // get the milliseconds since Epoch for the date
                             var milli = (x.getTime() - 10000);

                             // calculate new date 10 seconds earlier. Could be one second, 
                             // but I like a little buffer for my neuroses
                             var vanilli = new Date(milli);

                             // calculate the month (0-11) based on the new date
                             var mon = vanilli.getMonth();
                             var yr = vanilli.getFullYear();

                             // return appropriate quarter for that month
                             if ( mon <= 2 ) {
                                 return  "Q1 " + yr;
                             } else if ( mon <= 5 ) {
                                 return  "Q2 " + yr;
                             } else if ( mon <= 8 ) {
                                 return  "Q3 " + yr;
                             } else {
                                 return "Q4 " + yr;
                             }
                         } )
            .orient( "bottom" );

var xAxis=d3.svg.axis（）
.比例（x）
.滴答声（d3.time.months，3）
.x格式（函数（x）{
//获取日期的自历元以来的毫秒数
var milli=（x.getTime（）-10000）；
//提前10秒计算新日期。可能是1秒，
//但我喜欢给我的神经症一点缓冲
var香兰素=新日期（毫）；
//根据新日期计算月份（0-11）
var mon=vanilli.getMonth（）；
var yr=香兰素。getFullYear（）；
//返回该月的适当季度
如果（周一最近添加了季度格式

%q
生成范围
[1,4]

要创建生成“Q1 2020”、“Q2 2020”等的格式函数，请执行以下操作：

import { utcFormat } from 'd3-time-format';

const quarterFormat = d => `Q${utcFormat('%q %Y')(d)}`;

你可能想看一个例子。这可能会帮助人们寻找这个问题