D3:使用. tickvalues()方法格式化年份

Question

我正试图为我的X轴上的。tickvalues方法编写一个函数，以便我的数据数组中的第一年被写为全年(2000)，其余年份被写为:'01，'02，'03…等

这里是比例尺，轴和数据:

var xScale = d3.time.scale()
.range([0, width])
.domain(d3.extent(dataset, function(d) { return d.year }));
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var dataset = [
{ year: "2000", age1: 31, age2: 10, age3: 32, age4: 27 },
{ year: "2001", age1: 32, age2: 12, age3: 30, age4: 26 },
{ year: "2002", age1: 24, age2: 19, age3: 32, age4: 25 },
{ year: "2003", age1: 26, age2: 18, age3: 31, age4: 25 },
{ year: "2004", age1: 22, age2: 17, age3: 34, age4: 27 },
{ year: "2004", age1: 24, age2: 17, age3: 33, age4: 26 },
{ year: "2006", age1: 31, age2: 15, age3: 32, age4: 22 },
{ year: "2007", age1: 30, age2: 15, age3: 35, age4: 20 },
{ year: "2008", age1: 27, age2: 18, age3: 31, age4: 24 },
{ year: "2009", age1: 25, age2: 15, age3: 35, age4: 25 },
{ year: "2010", age1: 34, age2: 12, age3: 33, age4: 21 },
{ year: "2011", age1: 31, age2: 14, age3: 32, age4: 23 },
{ year: "2012", age1: 27, age2: 18, age3: 30, age4: 25 },
{ year: "2013", age1: 25, age2: 20, age3: 35, age4: 20 }
];
// convert years to dates
var parseDate = d3.time.format("%Y").parse;
dataset.forEach(function(d) {
    d.year = parseDate(d.year);
}); 

我有一个函数将年份格式化为'01，'02等:

 var formatYear = d3.time.format("'" +"%y");

但是当我在。tickvalues()方法中应用它时，它不起作用:

xAxis.tickValues( function(d){ if(d==dataset[0].year){return d;}else{return formatYear(d);} } );

Answer 1

.tickValues()方法用于指定哪些值在轴上接收刻度，而不是用于指定如何格式化。为此，您应该使用.tickFormat()方法。

首先，看起来你在你发布的代码块中做的事情完全是向后的。在创建刻度域之前，您应该定义数据并将值转换为日期。

由于您正在将数据中的年值转换为Date对象，当您创建规模时，您可以使用一元+操作符将它们强制转换为ms数…

var xScale = d3.time.scale()
  .range([0, width])
  .domain(d3.extent(dataset, function(d) { return +d.year; }));

…然后可以在传递给.tickFormat()的函数中使用:

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(function(d) {
  // if the year ends in 00 then display the full year
  if (d3.time.format('%Y')(d).slice(-2) === '00') {
    return d3.time.format('%Y')(d);
  } else {
    // otherwise shorten it to the final 2 digits
    return d3.time.format(''%y')(d);
  }
})
.ticks(d3.time.year, 1);

最后一行显示了使用实际日期对象而不是年份字符串作为刻度的优势，因为您可以精确控制刻度的时间间隔。在本例中，我指定了每年应该有一个刻度。

这里是一个演示JSFiddle