d3 막대 차트에서 사용자 정의 x 축 레이블을 설정 하시겠습니까?

Question

나는이 페이지의 D3의 crossfilter 라이브러리를 사용하고 있습니다 : 두 번째 그래프를 보면

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

, 당신은 x 축 레이블을 가지고 볼 수 있습니다 0.0, 0.5, 1.0, ... , 6.0. 나는 그 레이블이 요일이되도록해야합니다. 그래서 0.0은 월요일이 될 것이고, 0.5는 전혀 존재해서는 안되며, 왜 데이터에 정수 만 존재하고, 1.0은 화요일 이어야만했기 때문에 왜 나타나는지 모르겠습니다.

아무에게도이를 수행 할 수있는 방법을 알려주시겠습니까? 4 개의 그래프는 모두 동일한 함수를 호출하므로이 특정 그래프에 대해서만 레이블을 수정해야합니다 (하드 코딩은 괜찮습니다).

Answer 1

주문 척도를 확인하십시오.

D3의 V4에서

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

Answer 2

나는 다음과 같은 방법으로 그것을 밖으로 일 : : 예를 들어, 다음

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

를 단지 규모에 전달 : 그 동안, 당신은 아주 쉽게 자신의 tickFormat을 할 수

을

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