Set custom x-axis labels in d3 histograms?

Question

I am using the crossfilter d3 library on this page:

http://jovansfreelance.com/bikestats/d3/crossfilter.php

If you look at the second graph, you will see that the x axis is labeled 0.0, 0.5, 1.0, ..., 6.0. I need these shortcuts to be days of the week, so 0.0 will be on Monday, 0.5 should not be at all, and I don't know why this appeared, because the data has only integers, 1.0 is Tuesday, etc.

Can someone tell me how to do this? Please note that all 4 graphs call the same function, and I need to change the labels (strict encoding them in order) only for this particular graph.

Answer 1

You should check the ordinal scales. In the meantime, you can make your own tickFormat pretty easily:

var weekdays = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"]; var formatDay = function(d) { return weekdays[d % 7] + "day"; } 

Then just go to the scale, for example:

 var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(formatDay); 

Answer 2

In D3 v4, I worked as follows:

 var data = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"] var xScaleLabels = d3 .scalePoint() .domain(data) .rangeRound([50, width - 50]); // In pixels var axisTop2 = d3 .axisBottom() .scale(xScaleLabels) .ticks(data.length); svg .append("g") .call(axisTop2) .attr("transform", "translate(" + margin.left + "," + height + ")");