如何进行 d3.js 轴的本地化？

Posted 2023-04-14

【中文标题】如何进行 d3.js 轴的本地化？

【英文标题】：How to make a localization of d3.js axis?

【发布时间】：2015-09-07 14:41:04

【问题描述】：

我知道that page，但是我应该如何使用该语言环境在轴上显示本地化的月份和日期？我有像“2014-11-14T00:00:00+03:00”这样的日期，现在我只使用new Date()，而不是特殊的d3.time.format。如果我要制作 locale.timeFormat，如何实现它以在轴上正确显示？

我尝试了一件事。做了一个d3.locale，用locale.timeFormat('%b')做了本地化格式变量，然后放到tickFormat函数中。没关系，我已经本地化了几个月。但是在轴上没有特殊格式的标签会更加灵活——如果你有大域，它们会显示年份，如果你有小域，它们会显示天数。是否可以用首选语言制作这种灵活的标签？

谢谢！

【参考方案1】：

根据此文档页面：https://github.com/mbostock/d3/wiki/Time-Formatting#format_multi

d3.time.scale 使用的默认时间格式实现为：

var format = d3.time.format.multi([
  [".%L", function(d)  return d.getMilliseconds(); ],
  [":%S", function(d)  return d.getSeconds(); ],
  ["%I:%M", function(d)  return d.getMinutes(); ],
  ["%I %p", function(d)  return d.getHours(); ],
  ["%a %d", function(d)  return d.getDay() && d.getDate() != 1; ],
  ["%b %d", function(d)  return d.getDate() != 1; ],
  ["%B", function(d)  return d.getMonth(); ],
  ["%Y", function()  return true; ]
]);

要使用相同的逻辑本地化您的时间刻度，您可以将相同的数组传递给您的语言环境：

var localeMultiTimeFormat = yourLocale.timeFormat.multi([
    [".%L", function(d)  return d.getMilliseconds(); ],
    ...
]);
yourScale.tickFormat(localeMultiTimeFormat);

【讨论】：

哇，我读了很多次那个页面，实际上没有找到答案。