How to make localization on months / days for D3js?-Collection of common programming errors
NeonI am looking for a way to do localization on D3
I have found the values
d3_time_days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], d3_time_dayAbbreviations = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], d3_time_months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], d3_time_monthAbbreviations = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
inside D3 but as they are local/privat to D3 i (obviously) cant access them.
Any hints would be great, thanks 🙂
Update 1:
Seems only a recompile can do the magic – but can’t be boughtered – so ended up hard coding the edits in the minified version – shame on me…
Update 2:
Will try to look into how to make D3 accept an “on the fly” localization setting like fx moment.js does it:
moment.lang('da', { months : "Januar_Februar_Marts_April_Maj_Juni_Juli_August_September_Oktober_November_December".split("_"), monthsShort : "Jan_Feb_Mar_Apr_Maj_Jun_Jul_Aug_Sep_Okt_Nov_Dec".split("_"), weekdays : "Søndag_Mandag_Tirsdag_Onsdag_Torsdag_Fredag_Lørdag".split("_"), weekdaysShort : "Søn_Man_Tir_Ons_Tor_Fre_Lør".split("_"), weekdaysMin : "Sø_Ma_Ti_On_To_Fr_Lø".split("_"), ordinal : '%d.', week : { dow : 1, // Monday is the first day of the week. doy : 4 // The week that contains Jan 4th is the first week of the year. } });
Lars KotthoffFrom the documentation:
D3’s implementation is fixed to a locale at compile time based on the $LOCALE environment variable.
In order to localise it to your environment, you need to recompile d3.js (and d3.min.js) on a machine with the locale settings you want. This will replace the strings you’re seeing in the source.
dsuessMultiple Files: Recompiling the Lib and providing multiple files of 10.000 lines of codes, differing only at 5 lines… is this best practice?
Patch for on the fly changes: As locale-string are private you can (or rather need to) patch D3.js. Unfortunately any patched library complicates update processes. An example of on-the-fly localization is shown at internationalization and localization at runtime
Official Commit: Mike Bostock reacted quickly an there is a commit on locale-branch by him. It seems to be a first draft, but maybe it is helpful for you.
dsuess
cupermanYou can create custom d3 time formatters and use moment.js for localization. For example, to create an axis with localized dates:
var x = d3.time.scale(); var myTimeFormatter = function(date) { return moment(date).format("LL"); }; var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(myTimeFormatter);
Then use
moment.lang
to add support for additional languages and to toggle current language. Refer to http://momentjs.com/docs/#/i18n for specifics.