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

d3 - 模拟 x 轴的标签

d3 - mock the labelling of the x axis

javascript

sorting

axis

axis-labels

d3.js