d3.js 的本地化（d3.locale 使用示例）

Question

我正在尝试在我的应用中使用 d3.locale() 来显示月份的俄语名称。 http://jsfiddle.net/j2feJ/2/ 另外，我需要shortMonths 变量为英文，因为它们在我的数据库中是英文的。

var ru_RU = {
    "decimal": ",",
        "thousands": "\xa0",
        "grouping": [3],
        "currency": ["", " руб."],
        "dateTime": "%A, %e %B %Y г. %X",
        "date": "%d.%m.%Y",
        "time": "%H:%M:%S",
        "periods": ["AM", "PM"],
        "days": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
        "shortDays": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
        "months": ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
        "shortMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
}

但显示仍然是英文。是不是我用错了？

Answer 1

调用d3.locale() 不会改变d3 的内部工作，它只是创建并返回一个本地化对象。您需要捕获此返回值并将其存储在变量中，以便以后使用。鉴于您在示例代码中创建的对象，您可以这样做：

var RU = d3.locale(ru_RU);

然后，当您需要本地化一个值时，您必须显式调用它。在您的情况下，您希望完整的月份名称显示为 x 轴标签。

为此，您可以在 x 轴上添加 .tickFormat()，并指定格式应为完整月份名称的本地化版本。

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .ticks(5)
  .tickPadding(8)
  .tickFormat(RU.timeFormat("%B"));

locale.timeFormat() 等效于d3.time.format()，除了它使用您创建的语言环境而不是默认为 en_US。在本例中，locale 是我们之前创建的变量 RU。

这是更新后的JSFiddle。

请记住，每次您想要一个本地化的字符串或值时，都需要显式调用它。使用locale.numberFormat() 代替d3.format()，使用locale.timeFormat() 代替d3.time.format()，其中locale 是使用d3.locale() 创建的本地化对象。希望对您有所帮助。