Currently, I am in the process of creating a function for the .tickValues method on my X axis. The goal is to display the first year in my data array as the full year (2000) while the subsequent years are displayed as: '01, '02, '03.. and so on.
Below you can find the scale, axis, and dataset information:
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: "2005", 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);
});
I have already created a function that formats the years as '01, '02, etc:
var formatYear = d3.time.format("'" +"%y");
However, when I try to apply this function within the .tickValues() method, it does not seem to work as intended:
xAxis.tickValues( function(d){ if(d==dataset[0].year){return d;}else{return formatYear(d);} } );