Blog

Zahlenformate lokalisieren mit d3js

d3js ist eine phänomenale Javascript Bibliothek für die Erstellung von datengetriebenen Visualisierungen. Standardmäßig stellt d3js Zahlen und Daten in der amerikanischen Lokalisierung dar. Tausendertrennzeichen ist in dieser Konfiguration das Komma, das Dezimaltrennzeichen ein Punkt. Das führt im deutschen Sprachraum verständlicherweise zu Verwirrungen. Daher ist es sinnvoll, die Lokalisierung entsprechend auf die Zielgruppe einzustellen. In d3js ist es möglich, sich eine eigene Lokalisierung zu definieren, in dem man sich ein eigenes Objekt von d3.locale() ableitet.

var formatDE = d3.locale({
"decimal": ",",
"thousands": ".",
"grouping": [3],
"currency": ["€", ""],
"dateTime": "%a %b %e %X %Y",
"date": "%d.%m.%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"],
"shortDays": ["Mo", "Di", "Mi", "DO", "Fr", "Sa", "So"],
"months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
"shortMonths": ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
});

Im Anschluss erstellt man sich ein Formatobjekt, das die Zahlen entsprechend den Vorgaben formatieren. In diesem Beispiel ein Format, das Tausendertrennzeichen setzt, ohne Dezimaltrennzeichen und Nachkommastellen - hier muss auf die d3js Formatsyntax zurückgegriffen werden.

var formatT = formatDE.numberFormat( ",d" );

Später greift man auf das Objekt zurück, wenn man dieses Format anwenden möchte.

d3.select( "#detail" )
    .append( "p" )
    .text( formatT(d.value) );

d3js stellt jetzt eine korrekt lokalisierte Zahl mit einem Punkt als Tausendertrennzeichen dar. Genau, wie wir es definiert haben.