d3 - 模拟x轴的标记

Question

我有一个图表，其中x轴表示日历周。由于年份的变化，我的图表现在没有正确排序。所以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");