Question

我有一组季度数据。这是数组：

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年第一季度，2008年第二季度，2008年第三季度......我的X轴使用基于时间的比例我不确定是否有办法解析这些日期，因为他们现在正在使用d3.time.format。然而，我可以解析它们，如果我使用数月而不是像01 / 2008,04 / 2008 ...使用：parseDate = d3.time.format（＆＃34;％m /％Y＆＃34;）。parse;

我应该将数组中的日期写入数月，然后编写一个函数将月份转换为季度？或者有没有办法将Q1..ect保持在现在的数组中并解析日期？

Answer 1

以下是我为数据解决这个问题的方法。

请注意，我从日期（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" );

Answer 2

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

Answer 3

这里有一个很好的自述文件，说明如何手动解析宿舍，但d3并不能自动完成整个过程。

Google group link

Answer 4

最近添加了四分之一格式 https://github.com/d3/d3-time-format/pull/58

%q产生一个[1,4]范围内的整数

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

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

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

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

4 个答案: