Ustaw niestandardowe etykiety osi X na wykresach słupkowych D3?

Question

Używam crossfilter bibliotekę d3 na tej stronie:

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

Jeśli spojrzeć na drugim wykresie zobaczysz oś x ma etykiety 0,0, 0,5, 1,0, ... , 6.0. Potrzebuję tych etykiet jako dni tygodnia, więc 0,0 będzie w poniedziałek, 0,5 nie powinno być w ogóle i nie wiem, dlaczego się pojawił, ponieważ w danych są tylko liczby całkowite, 1,0 to wtorek itd.

Czy ktoś może mi powiedzieć, jak to osiągnąć? Zauważ, że wszystkie 4 wykresy wywołują tę samą funkcję i muszę zmodyfikować etykiety (trudne są ich kodowanie) tylko dla tego konkretnego wykresu.

Answer 1

Powinieneś sprawdzić skale porządkowe. W międzyczasie można zrobić własny tickFormat dość łatwo:

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

Następnie wystarczy przekazać je do skali, np:

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

Answer 2

w D3 v4 poradziłem sobie w następujący sposób:

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 + ")");