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

Question

我在此页面上使用 d3 交叉过滤器库：

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