D3.time.format.multi in v4.x

Question

In a previous version of my code, I used to install the appropriate locale format similar to this

format = { "decimal": ".", "thousands": "", "grouping": [3], "currency": ["€", ""], "dateTime": "%a %b %e %X %Y", "date": "%d-%m-%Y", "time": "%H:%M:%S", "periods": ["AM", "PM"], "days": ["Domenica", "Lunedi", "Martedi", "Mercoledi", "Giovedi", "Venerdi", "Sabato"], "shortDays": ["Do", "Lu", "Ma", "Me", "Gi", "Ve", "Sa"], "months": ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"], "shortMonths": ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"] } 

and then

 var localeFormatter = d3.locale(format); // set time tick format var tickFormat = localeFormatter.timeFormat.multi([ ["%H:%M", function (d) { return d.getMinutes(); }], ["%H:%M", function (d) { return d.getHours(); }], ["%a %d", function (d) { return d.getDay() && d.getDate() != 1; }], ["%b %d", function (d) { return d.getDate() != 1; }], ["%B", function (d) { return d.getMonth(); }], ["%Y", function () { return true; }] ]); 

I finally saved these checkmark format options to use in my charts.

 D3Preferences['localTimeTickFormat'] = tickFormat; 

After upgrading to v4.2.8, d3.locale disappeared, and I cannot figure out how to achieve the same result.

Can someone point me in the right direction? D3 documentation didn't help me

Answer 1

You can simply do it like this:

 d3.formatDefaultLocale(format); 

and then

 var tickFormat=function(date){ if(date.getMinutes()) return d3.timeFormat('%H:%M')(date); if(date.getHours()) return d3.timeFormat('%H:%M')(date); if(date.getDay()&&date.getDate()!=1) return d3.timeFormat('%a %d')(date); if(date.getDate()!=1) return d3.timeFormat('%b %d')(date); if(date.getMonth()) return d3.timeFormat('%B')(date); return d3.timeFormat('%Y')(date); 

}

This works for me.

Answer 2

With .multi deprecated, your tickFormat() function tickFormat() now also handle filtering logic, for example:

 // Establish the desired formatting options using locale.format(): var formatDay = d3.timeFormat("%a %d"), formatWeek = d3.timeFormat("%b %d"), formatMonth = d3.timeFormat("%B"), formatYear = d3.timeFormat("%Y"); // Define filter conditions function tickFormat(date) { return (d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek) : d3.timeYear(date) < date ? formatMonth : formatYear)(date); } 

Here's an updated version of Mike original bl.ock (the one from which you probably got localeFormatter.timeFormat.multi() ) is configured to use the conditional logic @multocumulus mentioned above.