d3 - mock the labelling of the x axis

Question

I have a chart where the x Axis represents calendarweeks. Because of the change of the year my chart is now not right sorted. So the calendarweek 1 from 2015 is now before the calendarweeks from 2014.

enter image description here

I know that I have to change something in my data. I thought of adding the year before the calendarweek like 151, 152, 1450, 1451, 1452 and so on.

I tried this and it works. But it is not really readable then for the customer. So I thought I could just parse the calendarweek number to 1, 2, 50, 51 and 52 again and send it to the xAxis variable.

var xAxis = d3.svg.axis()
.scale(x)
.tickValues(sliceKeys)
.orient("bottom");

But then it happens that the ticks won't match with the bars and don't appear. But the bars are right sorted now. Does anybody has an idea how this could be done?

enter image description here

May you put your entire code on http://jsfiddle.net/ ? Too less informations to help you — Francesco, Jan 16 '15 at 16:01
Of course. Here is the fiddle: http://jsfiddle.net/rvvca8y8/ — sanyooh, Jan 16 '15 at 16:05
The values you use for the axis are not in the domain of the scale, hence you're getting `NaN` as values and the corresponding error message. I would recommend using the `.tickFormat()` function to format your tick values appropriately instead of changing the underlying data. — Lars Kotthoff, Jan 16 '15 at 17:00

score 3 · Accepted Answer · answered Jan 16 '15 at 23:44

As per Lars's recommendation in the comments above, you can use .tickFormat() to transform the value with the year into a value without the year.

Here's a modified fiddle. I disabled your slicing of the keys (but did it in a lazy way by just commenting out the slicing part without removing the entire loop, even though it's no longer necessary).

Then, the only thing that was needed is the .tickFormat() bit that strips the year out of the full value:

var xAxis = d3.svg.axis()
  .scale(x)
  .tickValues(sliceKeys)
  .tickFormat(function(yearAndWeek) {
    return String(yearAndWeek).slice(2);
  })
  .orient("bottom");

d3 - mock the labelling of the x axis

1 Answers1