在d3条形图中设置自定义x轴标签？

Question

我正在使用d3交叉过滤库来制作此页面：http://jovansfreelance.com/bikestats/d3/crossfilter.php。如果您查看第二个图表，您会看到x轴上有标签0.0、0.5、1.0等。我需要这些标签变成星期几，所以0.0应该是星期一，0.5不应该出现，因为数据中只有整数，1.0应该是星期二，以此类推。请问有人知道如何实现吗？请注意，所有四个图表都调用同一个函数，我只需要修改这个特定图表的标签（硬编码也可以）。

- robert

Answer 1

你应该了解一下序数刻度。与此同时，你可以很容易地制作自己的刻度格式：

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

- Chris Wilson

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

- Santiago Martí Olbrich