d3 - 模拟 x 轴的标签答案

【问题标题】：d3 - mock the labelling of the x axisd3 - 模拟 x 轴的标签
【发布时间】：2015-01-16 15:50:52
【问题描述】：

我有一个图表，其中 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");

但随后会发生刻度线与条形不匹配并且不会出现的情况。但是条形图现在已正确排序。有人知道如何做到这一点吗？

【问题讨论】：

你可以把你的整个代码放在jsfiddle.net 上吗？帮助您的信息太少了
当然。这是小提琴：jsfiddle.net/rvvca8y8
您用于轴的值不在比例范围内，因此您将获得 NaN 作为值和相应的错误消息。我建议使用 .tickFormat() 函数来适当地格式化您的刻度值，而不是更改基础数据。

标签： javascript sorting d3.js axis axis-labels

【解决方案1】：

根据上述cmets中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");

【讨论】：