javascript - d3 - 模拟 x Axis 的标签

Question

我有一个图表，其中 x Axis 代表日历周。由于年份的变化，我的图表现在没有正确排序。因此 2015 年的日历周 1 现在位于 2014 年的日历周之前。

我知道我必须更改数据中的某些内容。我想在日历周之前添加年份，例如 151、152、1450、1451、1452 等。

我试过了，它有效。但对于客户来说，它并不是真正可读的。所以我想我可以再次将日历周数解析为 1、2、50、51 和 52 并将其发送到 xAxis 变量。

var xAxis = d3.svg.axis()
.scale(x)
.tickValues(sliceKeys)
.orient("bottom");

但随后刻度线与条形图不匹配并且不显示。但现在这些条已经正确排序了。有人知道如何做到这一点吗？

Answer 1

根据上面评论中 Lars 的建议，您可以使用 .tickFormat() 将带有年份的值转换为不带年份的值。

Here's a modified fiddle 。我禁用了您对键的切片(但是以一种懒惰的方式完成了它，只需注释掉切片部分而不删除整个循环，即使它不再需要)。

然后，唯一需要的是 .tickFormat() 位，它将年份从完整值中删除:

var xAxis = d3.svg.axis()
  .scale(x)
  .tickValues(sliceKeys)
  .tickFormat(function(yearAndWeek) {
    return String(yearAndWeek).slice(2);
  })
  .orient("bottom");