在 X 轴上仅显示选定日期的年份（无世纪）答案

【问题标题】：Show only the year (no century) for select dates in the X axis在 X 轴上仅显示选定日期的年份（无世纪）
【发布时间】：2013-11-24 15:49:07
【问题描述】：

我在 X 轴上仅显示某些日期，并且我使用 tickValues 函数从我的“dataPop”数组中选择这些日期：

xAxisPop.tickValues([dataPop[0].date, dataPop[20].date, dataPop[40].date])

但是，我希望 dataPop[20].date 和 dataPop[40].date 仅显示年份而不显示世纪，例如，1980 为 80。

我写了一个变量“formatDate”，只显示年份而不是世纪：

formatDate = d3.time.format("%y")

但是如何在 tickValues 函数中将 formatDate 应用于 dataPop[20].date、dataPop[40].date？

另外，仅供参考。我的日期目前是字符串...所以我想我应该使用不同的 D3 格式化方法来格式化字符串，而不是在我的 formatDate 函数中使用 d3.time.format ......对吗？还是我应该先将日期从字符串更改为日期，然后运行 formatDate 函数？

非常感谢

【问题讨论】：

【解决方案1】：

您将把格式化程序传递给xAxisPop.tickFormat。像tickFormat 这样的任何 d3 文本格式化选项都将常规 JavaScript 函数作为参数。 d3.time.format 只是构造常用方法的辅助方法。

在您的情况下，由于您的日期只是字符串，我建议您编写自己的格式化函数，也许：

function formatTwoDigitYear(d) { return d.substr(2,2); }

话虽如此，尽早将文本年份转换为日期，您可能会看到许多优势。

【讨论】：

谢谢，所以我有了 formatTwoDigitYear 函数，然后我写了：xAxisPop.tickValues([dataPop[0].date, dataPop[20].date, dataPop[40].date]); xAxisPop.tickFormat(formatTwoDigitYear); ...所以现在我在 X 轴上的所有日期都是两位数。但是，我希望 dataPop[0].date 和 dataPop[40].date 回到 4 位的旧方式，并且仅限于这两年。有没有办法做到这一点？顺便说一句-我认为我需要将日期保留为字符串，因为我使用 .rangeroundbands 作为我的 X 轴刻度（将 X 轴视为类别，而不是数字/日期），因为这是一个条形图。
由于格式化程序只是一个常规的 JavaScript 函数，您可以为其添加逻辑，例如检查 dataPop[2].date 的大小写。 return d == dataPop[2].date ? formatTwoDigitYear(d) : formatFourDigitYear(d); 的效果