在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

你应该检查出序数量表。在此期间，你可以让自己的tickFormat很容易：

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

然后，只需将它传递给规模，如：

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

Answer 2

在D3 V4我的工作了以下方法：

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