Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3.time.format.multi in v4.x

Tags:

d3.js

In a previous version of my code I used to set the appropriate locale format like 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 stored these tick format settings so I can use them in my charts

D3Preferences['localTimeTickFormat'] = tickFormat;

After updating to release v4.2.8 d3.locale is gone and I cannot figure out how to achieve the same result.

Can someone point me in the right direction? The d3 documentation did not help me

like image 736
Gavello Avatar asked Oct 27 '16 14:10

Gavello


1 Answers

With .multi deprecated, your tickFormat() function now has to handle filtering logic as well, like this:

// 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's original bl.ock (the one from which you likely derived localeFormatter.timeFormat.multi()), set to use the conditional logic @altocumulus mentions above.

like image 154
Bill Morris Avatar answered Nov 04 '22 19:11

Bill Morris