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轴标签.

为此,您可以将.tickFormat()x 添加到x轴,并指定格式应该是完整月份名称的本地化版本.

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().希望有所帮助.