如何使用tickFormat仅显示年份(作为世纪和最后两位数)

时间:2014-09-03 14:44:26

标签: javascript svg d3.js

这是我的代码,包括JSON示例以及我如何解析我的日期。

现在日期显示如下:例如10/1/2013

如何为x轴编写tickFormat函数,该函数返回tickValues函数中指定的第一年的全年(以世纪为单位)和其他所有年份的#14; 14(例如2014年)?

            JSON structure:
            var shortData5= [
            {"date":"10/1/2013","shortFig":12},
            {"date":"11/1/2013","shortFig":34},
            {"date":"12/1/2013","shortFig":-25}]


            //fyi- var shortData5 is passed in my chart building function as "thedata"

            var parseDate = d3.time.format("%x").parse;

            thedata.forEach(function(d) {               
                parseDate(d.date);
            }); 

            //Set up the X scales
            //for bars
            var xScaleOrdinal = d3.scale.ordinal()
                .rangeRoundBands([0, width], .1)
                .domain(thedata.map(function(d) { return d.date; }));

            //With the X scales, set up the X axis  
            var xAxis= d3.svg.axis()
                .orient("bottom")
                .tickFormat() //need function here;

            if(theDiv=="#contructionSingleMulti"|| theDiv=="#volumeExistingLong"|| theDiv=="#volumeNewLong"){
                xAxis.scale(xScaleOrdinal)
 .tickValues([thedata[4].date,thedata[16].date,thedata[28].date,thedata[40].date,thedata[52].date,thedata[64].date,thedata[76].date,thedata[88].date,thedata[100].date,thedata[112].date]);             
            }else{
                xAxis.scale(xScaleOrdinal)
                .tickValues([thedata[0].date,thedata[3].date]);             
            }


            //Call the X axis
            baseGroup.append("g")
                 .attr("class", "xaxis")
                 .attr("transform", "translate(0," + height + ")")
                 .call(xAxis);

1 个答案:

答案 0 :(得分:0)

我不确定您是如何根据提出问题的方式设置刻度值的格式。也许一个例子会更有帮助。您可以创建自定义刻度格式函数以传递到比例的.tickFormat访问器方法。

你可以这样做:

scale.tickFormat(myCustomTickFormatter);

function myCustomTickFormatter(datum, index)
{
    return /** some manipulation of datum **/
} 

另请参阅http://bl.ocks.org/mbostock/4149176以获取定义自定义刻度格式化程序的更复杂示例。