Localization of d3.js (d3.locale example of usage)

Question

I\'m trying to use d3.locale() in my app to display Russian names of months. http://jsfiddle.net/j2feJ/2/ Also, I need shortMonths variable to be

Answer 1

Calling d3.locale() doesn't change the internal workings of d3, it just creates and returns a localization object. You need to capture this return value and store it in a variable so you can use it later. Given the object you created in your example code, you could do that like this:

var RU = d3.locale(ru_RU);

Then when you need a value to be localized, you must call for it explicitly. In your case, you want the full month names to be displayed as x-axis labels.

To do this, you can add a .tickFormat() to your x-axis, and specify that the format should be your localized version of a full month name.

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

locale.timeFormat() is equivalent to d3.time.format(), except that it uses the locale that you created instead of defaulting to en_US. In this case locale is the variable RU which we created earlier.

Here is the updated JSFiddle.

Remember, each time you want a localized string or value, you need to call for it explicitly. Use locale.numberFormat() in place of d3.format(), and locale.timeFormat() in place of d3.time.format(), where locale is a localization object created with d3.locale(). Hope that helps.