Is there an easy way to align text labels between ticks?
Here is my time axis with labels above the ticks:
I would like to place these labels like here:
I ended up with one of the Lars Kotthoff's advices.
Every time when I call(axis)
I also adjust text labels.
Here is simplified code:
function renderAxis() {
axisContainer
.transition().duration(300)
.call(axis) // draw the standart d3 axis
.call(adjustTextLabels); // adjusts text labels on the axis
}
function adjustTextLabels(selection) {
selection.selectAll('.major text')
.attr('transform', 'translate(' + daysToPixels(1) / 2 + ',0)');
}
// calculate the width of the days in the timeScale
function daysToPixels(days, timeScale) {
var d1 = new Date();
timeScale || (timeScale = Global.timeScale);
return timeScale(d3.time.day.offset(d1, days)) - timeScale(d1);
}
Update:
BTW, here is a calendar demo with I ended up: http://bl.ocks.org/oluckyman/6199145