Đặt nhãn trục x tùy chỉnh trong biểu đồ thanh d3?

Question

Tôi đang sử dụng thư viện crossfilter d3 trên trang này:

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

Nếu bạn nhìn vào đồ thị thứ hai, bạn sẽ thấy trục x có nhãn 0,0, 0,5, 1,0, ... , 6.0. Tôi cần những nhãn đó là những ngày trong tuần, vì vậy 0.0 sẽ là thứ hai, 0.5 không nên có ở đó và tôi không biết tại sao nó xuất hiện vì chỉ có số nguyên trong dữ liệu, 1.0 nên là thứ ba, v.v.

Mọi người có thể cho tôi biết cách thực hiện điều này không? Lưu ý rằng tất cả 4 đồ thị đều gọi hàm giống nhau và tôi cần phải sửa đổi các nhãn (mã hóa cứng chúng là tốt) chỉ cho biểu đồ cụ thể này.

Answer 1

Bạn nên kiểm tra thang đo thứ tự. Trong khi đó, bạn có thể làm cho tickFormat riêng của bạn khá dễ dàng:

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

Sau đó chỉ cần vượt qua nó với quy mô, ví dụ:

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

Answer 2

trong D3 v4 tôi làm việc nó ra theo cách sau:

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