Localizzazione di d3.js (esempio di utilizzo d3.locale)

Question

Nella mia app sto tentando di utilizzare d3.locale() per visualizzare i nomi russi dei mesi. http://jsfiddle.net/j2feJ/2/ Inoltre, ho bisogno della variabile shortMonths per essere in inglese, perché sono in inglese nel mio database.

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"] 
} 

Ma il display è ancora in inglese. Sto usando male?

Answer 1

Chiamare d3.locale() non modifica il funzionamento interno di d3, ma crea e restituisce un oggetto di localizzazione. È necessario acquisire questo valore di ritorno e memorizzarlo in una variabile in modo da poterlo utilizzare in un secondo momento. Dato l'oggetto è stato creato nel codice di esempio, si potrebbe farlo in questo modo:

var RU = d3.locale(ru_RU); 

Poi, quando avete bisogno di un valore da localizzato, è necessario chiamare per esso in modo esplicito. Nel tuo caso, desideri che i nomi dei mesi completi vengano visualizzati come etichette dell'asse x.

Per fare ciò, è possibile aggiungere un .tickFormat() all'asse x e specificare che il formato deve essere la versione localizzata del nome di un mese completo.

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

locale.timeFormat() è equivalente a d3.time.format(), eccetto che utilizza l'impostazione internazionale che si è creato, invece di inadempiente su en_US. In questo caso locale è la variabile RU creata in precedenza.

Questo è l'aggiornamento JSFiddle.

Ricordare che ogni volta che si desidera una stringa o un valore localizzato, è necessario chiamarlo esplicitamente. Utilizzare locale.numberFormat() al posto di e locale.timeFormat() al posto di d3.time.format(), dove locale è un oggetto di localizzazione creato con d3.locale(). Spero possa aiutare.