How to make localization on months / days for D3js?-Collection of common programming errors


  • Neon

    I 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 Kotthoff

    From 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.


  • dsuess

    Multiple 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


  • cuperman

    You 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.